0d96ffd429
主要修复: - 恢复Agent真实头像显示（替换emoji为实际图片） - 删除自动跳转到ResultPageV2的逻辑 - 修改ResultModal支持动态内容显示 - 根据不同订单班显示对应的方案信息 优化内容: - 重构Agent系统，每个订单班独立管理Agent配置 - 删除不需要的ResultPageV2组件 - handleViewDetails改为在新标签页打开 影响模块: - web_frontend/exhibition-demo/src/components/ResultModal.tsx - web_frontend/exhibition-demo/src/pages/WorkflowPageV4.tsx - web_frontend/exhibition-demo/src/App.tsx - web_frontend/exhibition-demo/src/data/terminalSimulations/*.ts 🤖 Generated with Claude Code Co-Authored-By: Claude <noreply@anthropic.com>
672 lines
26 KiB
HTML
672 lines
26 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 Agent生成</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;
|
||
}
|
||
|
||
.hero-section {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.hero-section::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="http://www.w3.org/2000/svg"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23ffffff" fill-opacity="0.05"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');
|
||
}
|
||
|
||
.agent-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
||
transition: all 0.3s ease;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.agent-card:hover {
|
||
transform: translateY(-5px);
|
||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.agent-card::before {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 4px;
|
||
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.agent-avatar {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto 15px;
|
||
position: relative;
|
||
}
|
||
|
||
.agent-avatar img {
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.agent-status {
|
||
position: absolute;
|
||
bottom: 5px;
|
||
right: 5px;
|
||
width: 20px;
|
||
height: 20px;
|
||
background: #10b981;
|
||
border: 3px solid white;
|
||
border-radius: 50%;
|
||
animation: pulse 2s infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
|
||
}
|
||
70% {
|
||
box-shadow: 0 0 0 10px rgba(16, 185, 129, 0);
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
||
}
|
||
}
|
||
|
||
.section-card {
|
||
background: white;
|
||
border-radius: 12px;
|
||
padding: 30px;
|
||
margin-bottom: 30px;
|
||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
|
||
}
|
||
|
||
.section-header {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 15px;
|
||
border-bottom: 2px solid #f3f4f6;
|
||
}
|
||
|
||
.section-icon {
|
||
width: 50px;
|
||
height: 50px;
|
||
border-radius: 10px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin-right: 15px;
|
||
font-size: 24px;
|
||
}
|
||
|
||
.timeline {
|
||
position: relative;
|
||
padding-left: 40px;
|
||
}
|
||
|
||
.timeline::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 15px;
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 2px;
|
||
background: #e5e7eb;
|
||
}
|
||
|
||
.timeline-item {
|
||
position: relative;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.timeline-item::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: -30px;
|
||
top: 5px;
|
||
width: 12px;
|
||
height: 12px;
|
||
background: #667eea;
|
||
border: 3px solid white;
|
||
border-radius: 50%;
|
||
box-shadow: 0 0 0 4px #f3f4f6;
|
||
}
|
||
|
||
.ai-thinking {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
color: white;
|
||
padding: 5px 15px;
|
||
border-radius: 20px;
|
||
font-size: 14px;
|
||
animation: thinking 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes thinking {
|
||
0%, 100% {
|
||
opacity: 0.7;
|
||
}
|
||
50% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.menu-card {
|
||
background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.menu-card::after {
|
||
content: '🥗';
|
||
position: absolute;
|
||
right: 20px;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: 40px;
|
||
opacity: 0.3;
|
||
}
|
||
|
||
.price-tag {
|
||
background: #ef4444;
|
||
color: white;
|
||
padding: 5px 10px;
|
||
border-radius: 20px;
|
||
font-weight: bold;
|
||
display: inline-block;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body class="bg-gray-50">
|
||
<!-- 英雄区域 -->
|
||
<section class="hero-section text-white py-20 relative">
|
||
<div class="container mx-auto px-4 relative z-10">
|
||
<div class="text-center">
|
||
<div class="inline-flex items-center space-x-2 bg-white/20 backdrop-blur px-4 py-2 rounded-full mb-4">
|
||
<span class="ai-thinking">
|
||
<i class="fas fa-robot mr-2"></i>
|
||
AI Agent 协作生成
|
||
</span>
|
||
</div>
|
||
<h1 class="text-5xl font-bold mb-4">中高端个性化轻食店铺</h1>
|
||
<h2 class="text-3xl font-light mb-6">经营管理完整方案</h2>
|
||
<p class="text-xl opacity-90 max-w-3xl mx-auto">
|
||
7位AI专家通过多轮协作，为您打造从市场调研到经营管理的全方位解决方案
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI专家团队 -->
|
||
<section class="container mx-auto px-4 py-12">
|
||
<div class="text-center mb-10">
|
||
<h2 class="text-3xl font-bold mb-4">AI专家团队</h2>
|
||
<p class="text-gray-600">每位专家独立思考，协同工作，确保方案的专业性和完整性</p>
|
||
</div>
|
||
|
||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-7 gap-4">
|
||
<div class="agent-card text-center">
|
||
<div class="agent-avatar">
|
||
<img src="/data/订单班文档资料/食品/agent头像/餐饮市场调研专家.png" alt="市场调研专家">
|
||
<div class="agent-status"></div>
|
||
</div>
|
||
<h3 class="font-semibold">市场调研专家</h3>
|
||
<p class="text-xs text-gray-500 mt-2">市场分析 · 用户洞察</p>
|
||
</div>
|
||
|
||
<div class="agent-card text-center">
|
||
<div class="agent-avatar">
|
||
<img src="/data/订单班文档资料/食品/agent头像/餐饮品牌设计专家.png" alt="品牌设计专家">
|
||
<div class="agent-status"></div>
|
||
</div>
|
||
<h3 class="font-semibold">品牌设计专家</h3>
|
||
<p class="text-xs text-gray-500 mt-2">品牌策略 · VI设计</p>
|
||
</div>
|
||
|
||
<div class="agent-card text-center">
|
||
<div class="agent-avatar">
|
||
<img src="/data/订单班文档资料/食品/agent头像/菜品研发专家.png" alt="菜品研发专家">
|
||
<div class="agent-status"></div>
|
||
</div>
|
||
<h3 class="font-semibold">菜品研发专家</h3>
|
||
<p class="text-xs text-gray-500 mt-2">菜品创新 · 营养搭配</p>
|
||
</div>
|
||
|
||
<div class="agent-card text-center">
|
||
<div class="agent-avatar">
|
||
<img src="/data/订单班文档资料/食品/agent头像/餐厅选址装修专家.png" alt="选址装修专家">
|
||
<div class="agent-status"></div>
|
||
</div>
|
||
<h3 class="font-semibold">选址装修专家</h3>
|
||
<p class="text-xs text-gray-500 mt-2">选址策略 · 空间设计</p>
|
||
</div>
|
||
|
||
<div class="agent-card text-center">
|
||
<div class="agent-avatar">
|
||
<img src="/data/订单班文档资料/食品/agent头像/餐饮团队人员管理专家.png" alt="团队管理专家">
|
||
<div class="agent-status"></div>
|
||
</div>
|
||
<h3 class="font-semibold">团队管理专家</h3>
|
||
<p class="text-xs text-gray-500 mt-2">组织架构 · 人才培养</p>
|
||
</div>
|
||
|
||
<div class="agent-card text-center">
|
||
<div class="agent-avatar">
|
||
<img src="/data/订单班文档资料/食品/agent头像/财务预算专家.png" alt="财务预算专家">
|
||
<div class="agent-status"></div>
|
||
</div>
|
||
<h3 class="font-semibold">财务预算专家</h3>
|
||
<p class="text-xs text-gray-500 mt-2">成本控制 · 盈利预测</p>
|
||
</div>
|
||
|
||
<div class="agent-card text-center">
|
||
<div class="agent-avatar">
|
||
<img src="/data/订单班文档资料/食品/agent头像/轻食店经营管理专家.png" alt="经营管理专家">
|
||
<div class="agent-status"></div>
|
||
</div>
|
||
<h3 class="font-semibold">经营管理专家</h3>
|
||
<p class="text-xs text-gray-500 mt-2">运营策略 · 业绩提升</p>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 方案内容 -->
|
||
<section class="container mx-auto px-4 py-12">
|
||
<!-- 市场调研分析 -->
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<div class="section-icon bg-blue-100 text-blue-600">
|
||
<i class="fas fa-chart-line"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-bold">市场调研分析</h3>
|
||
<p class="text-gray-600">深度洞察轻食市场机遇</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h4 class="font-semibold mb-3">市场规模与增长</h4>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">✓</span>
|
||
<span>轻食市场规模达500亿，年增长率25%</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">✓</span>
|
||
<span>一二线城市渗透率仅15%，增长空间巨大</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-green-500 mr-2">✓</span>
|
||
<span>健康意识提升带动消费升级</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold mb-3">目标客群画像</h4>
|
||
<div class="bg-gray-50 rounded-lg p-4">
|
||
<div class="mb-2">
|
||
<span class="font-medium">年龄：</span> 25-40岁都市白领
|
||
</div>
|
||
<div class="mb-2">
|
||
<span class="font-medium">收入：</span> 月收入8000元以上
|
||
</div>
|
||
<div class="mb-2">
|
||
<span class="font-medium">特征：</span> 注重健康、追求品质生活
|
||
</div>
|
||
<div>
|
||
<span class="font-medium">痛点：</span> 缺乏个性化健康餐饮选择
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 品牌设计方案 -->
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<div class="section-icon bg-purple-100 text-purple-600">
|
||
<i class="fas fa-palette"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-bold">品牌设计方案</h3>
|
||
<p class="text-gray-600">打造独特的品牌形象</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div>
|
||
<h4 class="font-semibold mb-3">品牌定位</h4>
|
||
<p class="text-gray-600">「轻享生活·悦享健康」</p>
|
||
<p class="text-sm text-gray-500 mt-2">
|
||
为追求健康生活方式的都市人群提供个性化、高品质的轻食体验
|
||
</p>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold mb-3">视觉识别</h4>
|
||
<div class="space-y-2">
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-green-400 rounded mr-2"></div>
|
||
<span class="text-sm">主色：清新绿</span>
|
||
</div>
|
||
<div class="flex items-center">
|
||
<div class="w-8 h-8 bg-orange-300 rounded mr-2"></div>
|
||
<span class="text-sm">辅色：活力橙</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold mb-3">品牌理念</h4>
|
||
<ul class="space-y-1 text-sm">
|
||
<li>• 新鲜：食材每日配送</li>
|
||
<li>• 健康：营养科学搭配</li>
|
||
<li>• 个性：定制化服务</li>
|
||
<li>• 品质：精选优质食材</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 菜品研发计划 -->
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<div class="section-icon bg-green-100 text-green-600">
|
||
<i class="fas fa-utensils"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-bold">菜品研发计划</h3>
|
||
<p class="text-gray-600">创新菜品满足多元需求</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="space-y-4">
|
||
<div class="menu-card">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<h4 class="font-bold text-lg">经典轻食系列</h4>
|
||
<p class="text-sm text-gray-700 mt-1">凯撒沙拉、藜麦饭、烤鸡胸肉</p>
|
||
</div>
|
||
<span class="price-tag">¥35-45</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu-card">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<h4 class="font-bold text-lg">创意融合系列</h4>
|
||
<p class="text-sm text-gray-700 mt-1">墨西哥卷、泰式沙拉、日式便当</p>
|
||
</div>
|
||
<span class="price-tag">¥40-55</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="menu-card">
|
||
<div class="flex justify-between items-center">
|
||
<div>
|
||
<h4 class="font-bold text-lg">定制营养餐</h4>
|
||
<p class="text-sm text-gray-700 mt-1">根据个人需求定制，专业营养师配餐</p>
|
||
</div>
|
||
<span class="price-tag">¥50-80</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 选址与装修设计 -->
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<div class="section-icon bg-indigo-100 text-indigo-600">
|
||
<i class="fas fa-map-marked-alt"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-bold">选址与装修设计</h3>
|
||
<p class="text-gray-600">打造舒适用餐环境</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-2 gap-6">
|
||
<div>
|
||
<h4 class="font-semibold mb-3">选址策略</h4>
|
||
<div class="space-y-3">
|
||
<div class="bg-gray-50 p-3 rounded">
|
||
<strong>首选区域：</strong>CBD商圈、高端写字楼
|
||
</div>
|
||
<div class="bg-gray-50 p-3 rounded">
|
||
<strong>面积要求：</strong>80-120平方米
|
||
</div>
|
||
<div class="bg-gray-50 p-3 rounded">
|
||
<strong>租金预算：</strong>200-300元/平方米/月
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div>
|
||
<h4 class="font-semibold mb-3">装修风格</h4>
|
||
<ul class="space-y-2">
|
||
<li class="flex items-start">
|
||
<span class="text-indigo-500 mr-2">◆</span>
|
||
<span>北欧简约风格，营造轻松氛围</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-indigo-500 mr-2">◆</span>
|
||
<span>开放式厨房，展示制作过程</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-indigo-500 mr-2">◆</span>
|
||
<span>绿植装饰，强化健康理念</span>
|
||
</li>
|
||
<li class="flex items-start">
|
||
<span class="text-indigo-500 mr-2">◆</span>
|
||
<span>舒适座椅，满足商务洽谈需求</span>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 财务预算规划 -->
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<div class="section-icon bg-yellow-100 text-yellow-600">
|
||
<i class="fas fa-calculator"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-bold">财务预算规划</h3>
|
||
<p class="text-gray-600">科学规划资金投入</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="bg-blue-50 p-4 rounded-lg">
|
||
<h4 class="font-semibold text-blue-900 mb-2">初始投资</h4>
|
||
<p class="text-3xl font-bold text-blue-600">80-120万</p>
|
||
<ul class="text-sm mt-2 space-y-1">
|
||
<li>装修：40万</li>
|
||
<li>设备：25万</li>
|
||
<li>加盟/品牌：15万</li>
|
||
<li>流动资金：20万</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-green-50 p-4 rounded-lg">
|
||
<h4 class="font-semibold text-green-900 mb-2">月度运营</h4>
|
||
<p class="text-3xl font-bold text-green-600">25-35万</p>
|
||
<ul class="text-sm mt-2 space-y-1">
|
||
<li>租金：2.5万</li>
|
||
<li>人工：8万</li>
|
||
<li>食材：10万</li>
|
||
<li>其他：5万</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="bg-purple-50 p-4 rounded-lg">
|
||
<h4 class="font-semibold text-purple-900 mb-2">预期回报</h4>
|
||
<p class="text-3xl font-bold text-purple-600">18个月</p>
|
||
<ul class="text-sm mt-2 space-y-1">
|
||
<li>日客流：150-200人</li>
|
||
<li>客单价：45元</li>
|
||
<li>毛利率：65%</li>
|
||
<li>净利率：20-25%</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 实施时间线 -->
|
||
<div class="section-card">
|
||
<div class="section-header">
|
||
<div class="section-icon bg-red-100 text-red-600">
|
||
<i class="fas fa-clock"></i>
|
||
</div>
|
||
<div>
|
||
<h3 class="text-2xl font-bold">实施时间线</h3>
|
||
<p class="text-gray-600">3个月完成开业准备</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="timeline">
|
||
<div class="timeline-item">
|
||
<h4 class="font-semibold">第1个月：筹备阶段</h4>
|
||
<p class="text-gray-600">选址确定、设计方案、办理证照</p>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<h4 class="font-semibold">第2个月：建设阶段</h4>
|
||
<p class="text-gray-600">装修施工、设备采购、人员招聘</p>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<h4 class="font-semibold">第3个月：试营业</h4>
|
||
<p class="text-gray-600">员工培训、试营业、营销推广</p>
|
||
</div>
|
||
|
||
<div class="timeline-item">
|
||
<h4 class="font-semibold">正式开业</h4>
|
||
<p class="text-gray-600">盛大开业、会员体系上线、持续优化</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- AI协作说明 -->
|
||
<section class="bg-gradient-to-br from-purple-600 to-blue-600 text-white py-16">
|
||
<div class="container mx-auto px-4">
|
||
<div class="text-center mb-10">
|
||
<h2 class="text-3xl font-bold mb-4">AI Agent 协作过程</h2>
|
||
<p class="text-xl opacity-90">7位专家如何协同工作</p>
|
||
</div>
|
||
|
||
<div class="grid md:grid-cols-3 gap-6">
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-6">
|
||
<div class="text-3xl mb-4">1️⃣</div>
|
||
<h3 class="text-xl font-semibold mb-2">独立分析</h3>
|
||
<p class="opacity-90">每位专家基于自身专业领域，独立分析项目需求，形成初步方案</p>
|
||
</div>
|
||
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-6">
|
||
<div class="text-3xl mb-4">2️⃣</div>
|
||
<h3 class="text-xl font-semibold mb-2">交叉验证</h3>
|
||
<p class="opacity-90">专家间相互审阅方案，确保各模块间的协调性和可行性</p>
|
||
</div>
|
||
|
||
<div class="bg-white/10 backdrop-blur rounded-lg p-6">
|
||
<div class="text-3xl mb-4">3️⃣</div>
|
||
<h3 class="text-xl font-semibold mb-2">整合优化</h3>
|
||
<p class="opacity-90">经营管理专家整合各方案，形成完整的经营管理体系</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 底部行动号召 -->
|
||
<section class="py-16">
|
||
<div class="container mx-auto px-4 text-center">
|
||
<h2 class="text-3xl font-bold mb-6">开启您的轻食创业之旅</h2>
|
||
<p class="text-xl text-gray-600 mb-8">
|
||
AI Agent 已为您准备好完整的经营方案，让创业更简单
|
||
</p>
|
||
<div class="flex justify-center space-x-4">
|
||
<button class="bg-gradient-to-r from-purple-600 to-blue-600 text-white px-8 py-3 rounded-lg font-semibold hover:shadow-lg transition">
|
||
下载完整方案
|
||
</button>
|
||
<button class="border-2 border-purple-600 text-purple-600 px-8 py-3 rounded-lg font-semibold hover:bg-purple-50 transition">
|
||
预约咨询
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<!-- 返回顶部按钮 -->
|
||
<button id="backToTop" class="fixed bottom-8 right-8 bg-purple-600 text-white p-4 rounded-full shadow-lg hover:bg-purple-700 transition opacity-0 invisible">
|
||
<i class="fas fa-arrow-up"></i>
|
||
</button>
|
||
|
||
<script>
|
||
// 返回顶部功能
|
||
window.addEventListener('scroll', () => {
|
||
const backToTop = document.getElementById('backToTop');
|
||
if (window.scrollY > 300) {
|
||
backToTop.classList.remove('opacity-0', 'invisible');
|
||
backToTop.classList.add('opacity-100', 'visible');
|
||
} else {
|
||
backToTop.classList.add('opacity-0', 'invisible');
|
||
backToTop.classList.remove('opacity-100', 'visible');
|
||
}
|
||
});
|
||
|
||
document.getElementById('backToTop').addEventListener('click', () => {
|
||
window.scrollTo({ top: 0, behavior: 'smooth' });
|
||
});
|
||
|
||
// AI思考动画
|
||
const thinkingElements = document.querySelectorAll('.ai-thinking');
|
||
thinkingElements.forEach(el => {
|
||
setInterval(() => {
|
||
const dots = ['', '.', '..', '...'];
|
||
const currentText = el.textContent;
|
||
const baseText = currentText.replace(/\.+$/, '');
|
||
const dotIndex = (dots.indexOf(currentText.slice(baseText.length)) + 1) % dots.length;
|
||
el.textContent = baseText + dots[dotIndex];
|
||
}, 500);
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |