feat: 完成化工订单班图片处理和项目记忆重组
详细说明: - 化工订单班图片已标准化处理（8个图片，文件名与alt text完全一致） - 完成环保、财经商贸订单班的图片重命名工作 - 重组项目记忆文件，按照功能模块编号（00-09） - 删除旧的分散记忆文件，统一到新的编号体系 - 添加终端模拟文件：chemical.ts, environmental.ts, finance.ts - 清理web_result冗余文件（food react-app等） - 新增playwright截图记录和记忆文档 - 影响模块：订单班文档资料、项目记忆系统、终端模拟系统
This commit is contained in:
Yep_Q
1
web_frontend/web_result/order-classes/finance/agent-avatars
Symbolic link
1
web_frontend/web_result/order-classes/finance/agent-avatars
Symbolic link
@@ -0,0 +1 @@
|
||||
../../../../data/订单班文档资料/财经商贸/agent头像
|
||||
1144
web_frontend/web_result/order-classes/finance/css/styles.css
Normal file
1144
web_frontend/web_result/order-classes/finance/css/styles.css
Normal file
File diff suppressed because it is too large
Load Diff
1
web_frontend/web_result/order-classes/finance/images
Symbolic link
1
web_frontend/web_result/order-classes/finance/images
Symbolic link
@@ -0,0 +1 @@
|
||||
../../../../data/订单班文档资料/财经商贸/notion文稿/image
|
||||
711
web_frontend/web_result/order-classes/finance/index.html
Normal file
711
web_frontend/web_result/order-classes/finance/index.html
Normal file
@@ -0,0 +1,711 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>可复美爽肤水 - 财经商贸电商全链路运营</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
||||
</head>
|
||||
<body class="dark-theme">
|
||||
<!-- 主题切换按钮 -->
|
||||
<div class="theme-toggle">
|
||||
<button id="themeToggleBtn" class="theme-toggle-btn">
|
||||
<i data-lucide="sun" class="theme-icon theme-icon-light"></i>
|
||||
<i data-lucide="moon" class="theme-icon theme-icon-dark"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Hero 区域 -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">💼 财经商贸订单班</div>
|
||||
<h1 class="hero-title">可复美爽肤水</h1>
|
||||
<h2 class="hero-subtitle">电商全链路运营项目</h2>
|
||||
<p class="hero-description">
|
||||
<i data-lucide="target"></i> 从0到1打造化妆品电商爆款<br>
|
||||
<i data-lucide="users"></i> 7大专业Agent协同作战<br>
|
||||
<i data-lucide="trending-up"></i> 首年GMV目标3000万
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 导航栏 -->
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-item active">
|
||||
<i data-lucide="users"></i>
|
||||
<span>用户调研</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<i data-lucide="search"></i>
|
||||
<span>竞品分析</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<i data-lucide="package"></i>
|
||||
<span>选品策略</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<i data-lucide="palette"></i>
|
||||
<span>视觉设计</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<i data-lucide="megaphone"></i>
|
||||
<span>内容营销</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<i data-lucide="bar-chart-2"></i>
|
||||
<span>广告投放</span>
|
||||
</div>
|
||||
<div class="nav-item">
|
||||
<i data-lucide="globe"></i>
|
||||
<span>全局统筹</span>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Section 1: 用户调研与市场洞察 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/用户分析师.jpg" alt="用户分析师" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="users"></i> 用户分析师
|
||||
</div>
|
||||
<h2 class="section-title">用户调研与市场洞察</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="user-check"></i> 精准用户画像</h3>
|
||||
<p>通过多维度数据分析，精准定位目标用户群体。核心用户：25-34岁混干肌女性，月收入8000+，关注成分与功效，偏好内容种草型购买决策。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/油皮.jpg" alt="油皮人群特征" loading="lazy">
|
||||
<div class="image-caption">18-24岁油皮人群</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">年轻油皮群体</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="check-circle"></i> 控油清洁诉求强</li>
|
||||
<li><i data-lucide="check-circle"></i> 价格敏感度高</li>
|
||||
<li><i data-lucide="check-circle"></i> 偏好清爽质地</li>
|
||||
<li><i data-lucide="check-circle"></i> 抖音/B站活跃</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/初抗老-混干.jpg" alt="初抗老混干人群" loading="lazy">
|
||||
<div class="image-caption">25-34岁初抗老人群</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">初抗老混干肌</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="check-circle"></i> 保湿修护需求</li>
|
||||
<li><i data-lucide="check-circle"></i> 成分党友好</li>
|
||||
<li><i data-lucide="check-circle"></i> 品质>价格</li>
|
||||
<li><i data-lucide="check-circle"></i> 小红书重度用户</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/抗老-干皮.jpg" alt="抗老干皮人群" loading="lazy">
|
||||
<div class="image-caption">35-45岁抗老人群</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">熟龄抗老干皮</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="check-circle"></i> 抗老紧致诉求</li>
|
||||
<li><i data-lucide="check-circle"></i> 高端产品偏好</li>
|
||||
<li><i data-lucide="check-circle"></i> 信赖专业背书</li>
|
||||
<li><i data-lucide="check-circle"></i> 天猫京东主购</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-chart">
|
||||
<h3>用户数据分析</h3>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">用户洞察覆盖</span>
|
||||
<span class="stat-value customer-insights">0万+</span>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">竞品分析数量</span>
|
||||
<span class="stat-value competitor-analysis">0个</span>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 60%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: 竞品研究与市场定位 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/竞品分析师.jpg" alt="竞品分析师" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="search"></i> 竞品分析师
|
||||
</div>
|
||||
<h2 class="section-title">竞品研究与市场定位</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="crosshair"></i> 差异化定位策略</h3>
|
||||
<p>通过4大竞品SWOT分析，发现中高端+多场景+成分透明的市场空白点。定位中档偏上价格带（179-259元），主打屏障修护+舒缓保湿双核心功效。</p>
|
||||
</div>
|
||||
|
||||
<div class="image-container" style="margin-bottom: var(--spacing-xl);">
|
||||
<img data-src="images/爽肤水竞品分析.jpg" alt="竞品分析图表" loading="lazy">
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>竞品品牌</th>
|
||||
<th>品牌背景</th>
|
||||
<th>核心卖点</th>
|
||||
<th>价格区间</th>
|
||||
<th>优势劣势</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>薇诺娜</td>
|
||||
<td>医学护肤背景</td>
|
||||
<td>敏感肌专家定位</td>
|
||||
<td>200-400元</td>
|
||||
<td>专业度强但场景延展性弱</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>敷尔佳</td>
|
||||
<td>医美渠道起家</td>
|
||||
<td>术后修护标签</td>
|
||||
<td>150-350元</td>
|
||||
<td>成分党友好但品牌延伸过快</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>悦木之源</td>
|
||||
<td>雅诗兰黛集团</td>
|
||||
<td>菌菇水爆款</td>
|
||||
<td>300-500元</td>
|
||||
<td>国际大牌但性价比低</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>自然堂</td>
|
||||
<td>国货大众路线</td>
|
||||
<td>喜马拉雅植物</td>
|
||||
<td>100-200元</td>
|
||||
<td>渠道下沉强但功效性弱</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 3: 选品策略与产品规划 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/产品经理.jpg" alt="产品经理" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="package"></i> 产品经理
|
||||
</div>
|
||||
<h2 class="section-title">选品策略与产品规划</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="layers"></i> 产品矩阵设计</h3>
|
||||
<p>主推可复美爽肤水作为流量爆款，150ml主力款+300ml大容量礼盒装。日常价199元，大促价169元，礼盒装299元(赠小样)，目标毛利率45-50%。</p>
|
||||
</div>
|
||||
|
||||
<div class="product-grid">
|
||||
<div class="product-card">
|
||||
<img src="images/爽肤水产品图.jpg" alt="可复美爽肤水" class="product-image" loading="lazy">
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">可复美爽肤水 150ml</h3>
|
||||
<p class="product-desc">
|
||||
屏障修护+舒缓保湿双核心功效<br>
|
||||
日常价: ¥199 | 大促价: ¥169
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<img src="images/化妆品拍摄图.jpg" alt="礼盒装" class="product-image" loading="lazy">
|
||||
<div class="product-info">
|
||||
<h3 class="product-name">豪华礼盒装 300ml</h3>
|
||||
<p class="product-desc">
|
||||
大容量装+赠送试用装小样<br>
|
||||
礼盒价: ¥299 | 超值优惠装
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">选品准确率</div>
|
||||
<div class="stat-value product-selection">0%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">设计质量评分</div>
|
||||
<div class="stat-value design-quality">0%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">目标毛利率</div>
|
||||
<div class="stat-value">45-50%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 4: 视觉设计与素材制作 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/电商店铺平面设计师.jpg" alt="电商店铺平面设计师" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="palette"></i> 电商店铺平面设计师
|
||||
</div>
|
||||
<h2 class="section-title">视觉设计与素材制作</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="image"></i> 视觉营销体系</h3>
|
||||
<p>3套产品宣传海报（深层补水/科学配方/场景化主题）+ 4套小红书种草卡片设计，建立50+张可复用素材库，确保全平台视觉一致性。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/爽肤水产品宣传拍摄-大海背景.jpg" alt="深层补水主题" loading="lazy">
|
||||
<div class="image-caption">深层补水主题海报</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">深层补水系列</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>30秒提升角质层含水量，7天改善泛红干痒，深海般的补水体验。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/爽肤水产品宣传拍摄-绿植背景.jpg" alt="科学配方主题" loading="lazy">
|
||||
<div class="image-caption">科学配方主题海报</div>
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">科学配方系列</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>皮肤学精准配方，无酒精/无香精/无色素，敏感肌安心之选。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-4" style="margin-top: var(--spacing-xl);">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/小红书发帖卡片设计1.jpg" alt="小红书卡片1" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/小红书发帖卡片设计2.jpg" alt="小红书卡片2" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/小红书发帖卡片设计3.jpg" alt="小红书卡片3" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/小红书发帖卡片设计4.jpg" alt="小红书卡片4" loading="lazy">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 5: 内容营销与达人合作 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/内容电商运营专员.jpg" alt="内容电商运营专员" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="megaphone"></i> 内容电商运营专员
|
||||
</div>
|
||||
<h2 class="section-title">内容营销与达人合作</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="trending-up"></i> 内容电商策略</h3>
|
||||
<p>小红书种草→天猫转化→抖音复购的跨平台转化链路。头部KOL 2名+腰部达人15名+尾部KOC 50名的达人矩阵，月新增笔记200+篇。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/内容电商优势展示.jpg" alt="内容电商优势" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">内容电商优势</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="check-circle"></i> 精准种草触达</li>
|
||||
<li><i data-lucide="check-circle"></i> 高转化率</li>
|
||||
<li><i data-lucide="check-circle"></i> 用户粘性强</li>
|
||||
<li><i data-lucide="check-circle"></i> 口碑传播快</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">直播运营节奏</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="check-circle"></i> 每周3场常规直播</li>
|
||||
<li><i data-lucide="check-circle"></i> 单场GMV目标50万+</li>
|
||||
<li><i data-lucide="check-circle"></i> 抽奖福利+限时秒杀</li>
|
||||
<li><i data-lucide="check-circle"></i> 实时监控GPM数据</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">内容触达量</div>
|
||||
<div class="stat-value content-reach">0万+</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">转化率</div>
|
||||
<div class="stat-value">4.5%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">复购率目标</div>
|
||||
<div class="stat-value">35%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 6: 平台广告投放与优化 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/广告投放师.jpg" alt="广告投放师" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="bar-chart-2"></i> 广告投放师
|
||||
</div>
|
||||
<h2 class="section-title">平台广告投放与优化</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="target"></i> 精准投放策略</h3>
|
||||
<p>50个精选关键词+3大广告形式组合投放。搜索广告ROI目标≥3.5，推荐广告ROI≥2.8，预算分配：搜索50%、推荐30%、品牌20%。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/淘宝关键词搜索图1.jpg" alt="搜索广告示例" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">搜索直通车</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>核心词+长尾词组合，精准捕获购买意向用户。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/产品推荐榜与热销.jpg" alt="推荐位展示" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">超级推荐</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>"猜你喜欢"定向推送，触达潜在兴趣用户。</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/广告封面设计图.jpg" alt="品牌广告" loading="lazy">
|
||||
</div>
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">品销宝</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>首页焦点图+类目坑位，提升品牌曝光度。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="stats-chart" style="margin-top: var(--spacing-xl);">
|
||||
<h3>投放效果指标</h3>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">广告ROI</span>
|
||||
<span class="stat-value ad-roi">0%</span>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 95%"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stat-item-chart">
|
||||
<div class="stat-header">
|
||||
<span class="stat-label">点击率CTR</span>
|
||||
<span class="stat-value">3.2%</span>
|
||||
</div>
|
||||
<div class="stat-bar">
|
||||
<div class="stat-bar-fill" style="width: 70%"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 7: 全渠道运营统筹 -->
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img src="agent-avatars/新媒体运营总监.jpg" alt="新媒体运营总监" class="agent-avatar">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">
|
||||
<i data-lucide="globe"></i> 新媒体运营总监
|
||||
</div>
|
||||
<h2 class="section-title">全渠道运营统筹</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3><i data-lucide="git-branch"></i> 全渠道协同作战</h3>
|
||||
<p>天猫+抖音+小红书+私域四位一体运营体系。首年GMV目标3000万，次年8000万，三年破亿。月度预算60万（广告30万+达人20万+活动10万）。</p>
|
||||
</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>运营渠道</th>
|
||||
<th>定位职能</th>
|
||||
<th>月GMV目标</th>
|
||||
<th>核心指标</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>天猫旗舰店</td>
|
||||
<td>平台电商主战场</td>
|
||||
<td>250万</td>
|
||||
<td>转化率4.5%+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>抖音电商</td>
|
||||
<td>内容电商+直播</td>
|
||||
<td>180万</td>
|
||||
<td>GPM 500+</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>小红书</td>
|
||||
<td>种草营销阵地</td>
|
||||
<td>-</td>
|
||||
<td>月新增200+笔记</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>私域运营</td>
|
||||
<td>高价值用户沉淀</td>
|
||||
<td>50万</td>
|
||||
<td>复购率35%+</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="stats" style="margin-top: var(--spacing-xl);">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">月度销售额</div>
|
||||
<div class="stat-value monthly-sales">0万元</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">增长率</div>
|
||||
<div class="stat-value growth-rate">0%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">年度GMV目标</div>
|
||||
<div class="stat-value">3000万</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="expert-intro" style="margin-top: var(--spacing-xl);">
|
||||
<h3><i data-lucide="calendar"></i> 大促节点规划</h3>
|
||||
<div class="timeline-layout" style="padding-left: 0;">
|
||||
<div class="grid grid-4">
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h4 class="card-title">38女王节</h4>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<p>换季敏感肌急救<br>GMV目标: 500万</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h4 class="card-title">618年中大促</h4>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<p>冲击类目TOP10<br>GMV目标: 1200万</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h4 class="card-title">双11狂欢</h4>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<p>超级品牌日<br>GMV目标: 2500万</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h4 class="card-title">双12返场</h4>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<p>清库存+会员专享<br>GMV目标: 800万</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Footer: 项目成果总结 -->
|
||||
<section class="section" style="background: var(--bg-semi-dark); padding: var(--spacing-3xl) 0;">
|
||||
<div class="container">
|
||||
<h2 class="section-title text-center" style="margin-bottom: var(--spacing-2xl);">
|
||||
<i data-lucide="award"></i> 项目成果总结
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">📋 交付物清单</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="file-text"></i> 用户调研报告（25页）</li>
|
||||
<li><i data-lucide="file-text"></i> 竞品分析报告（18页）</li>
|
||||
<li><i data-lucide="file-text"></i> 选品策略方案</li>
|
||||
<li><i data-lucide="image"></i> 视觉素材库（50+张）</li>
|
||||
<li><i data-lucide="file-text"></i> 小红书种草SOP</li>
|
||||
<li><i data-lucide="file-text"></i> 天猫投放方案</li>
|
||||
<li><i data-lucide="file-text"></i> 抖音运营手册</li>
|
||||
<li><i data-lucide="file-text"></i> 全渠道计划书</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">📊 预期效果</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="trending-up"></i> 首年GMV 3000万</li>
|
||||
<li><i data-lucide="percent"></i> 毛利率 45-50%</li>
|
||||
<li><i data-lucide="users"></i> 新增用户 20万+</li>
|
||||
<li><i data-lucide="repeat"></i> 复购率 35%+</li>
|
||||
<li><i data-lucide="star"></i> 小红书笔记 2000+</li>
|
||||
<li><i data-lucide="play"></i> 抖音播放 5000万+</li>
|
||||
<li><i data-lucide="award"></i> 类目排名 TOP10</li>
|
||||
<li><i data-lucide="dollar-sign"></i> 净利率 15-20%</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header" style="order: 1;">
|
||||
<h3 class="card-title">🤝 团队配置</h3>
|
||||
</div>
|
||||
<div class="card-body" style="order: 2;">
|
||||
<ul class="feature-list">
|
||||
<li><i data-lucide="users"></i> 运营团队 5人</li>
|
||||
<li><i data-lucide="headphones"></i> 客服团队 3人</li>
|
||||
<li><i data-lucide="palette"></i> 设计团队 2人</li>
|
||||
<li><i data-lucide="truck"></i> 仓储物流 3000单/日</li>
|
||||
<li><i data-lucide="wallet"></i> 月度预算 60万</li>
|
||||
<li><i data-lucide="git-branch"></i> 7大Agent协同</li>
|
||||
<li><i data-lucide="globe"></i> 4大渠道运营</li>
|
||||
<li><i data-lucide="clock"></i> 7×24小时监控</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="text-center" style="margin-top: var(--spacing-2xl); color: var(--text-gray);">
|
||||
<p>🎉 可复美爽肤水电商全链路运营项目圆满完成！</p>
|
||||
<p style="margin-top: var(--spacing-sm);">© 2024 财经商贸订单班 | AI驱动的电商运营解决方案</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
278
web_frontend/web_result/order-classes/finance/js/main.js
Normal file
278
web_frontend/web_result/order-classes/finance/js/main.js
Normal file
@@ -0,0 +1,278 @@
|
||||
// 可复美爽肤水电商 - 主要JavaScript逻辑
|
||||
|
||||
// 页面初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('💰 财经商贸电商页面加载完成');
|
||||
|
||||
// 初始化Lucide图标
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// 初始化组件
|
||||
initNavigation();
|
||||
initAnimations();
|
||||
initLazyLoading();
|
||||
initSmoothScroll();
|
||||
updateStats();
|
||||
initThemeToggle();
|
||||
});
|
||||
|
||||
// 导航功能
|
||||
function initNavigation() {
|
||||
const navItems = document.querySelectorAll('.nav-item');
|
||||
const sections = document.querySelectorAll('.section');
|
||||
|
||||
// 点击导航项滚动到对应区块
|
||||
navItems.forEach((item, index) => {
|
||||
item.addEventListener('click', () => {
|
||||
// 移除所有活跃状态
|
||||
navItems.forEach(nav => nav.classList.remove('active'));
|
||||
// 添加当前活跃状态
|
||||
item.classList.add('active');
|
||||
|
||||
// 滚动到对应区块
|
||||
if (sections[index]) {
|
||||
const targetSection = sections[index];
|
||||
const offsetTop = targetSection.offsetTop - 100;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动时更新导航活跃状态
|
||||
window.addEventListener('scroll', () => {
|
||||
let current = '';
|
||||
sections.forEach((section, index) => {
|
||||
const sectionTop = section.offsetTop - 150;
|
||||
if (scrollY >= sectionTop) {
|
||||
current = index;
|
||||
}
|
||||
});
|
||||
|
||||
navItems.forEach((item, index) => {
|
||||
item.classList.remove('active');
|
||||
if (index === current) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 动画初始化
|
||||
function initAnimations() {
|
||||
// 使用 Intersection Observer 实现滚动动画
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有需要动画的元素
|
||||
const animatedElements = document.querySelectorAll('.card, .expert-intro, .product-card');
|
||||
animatedElements.forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 图片懒加载
|
||||
function initLazyLoading() {
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
const src = img.getAttribute('data-src');
|
||||
|
||||
// 创建新图片对象来预加载
|
||||
const tempImg = new Image();
|
||||
tempImg.onload = function() {
|
||||
img.src = src;
|
||||
img.classList.add('loaded');
|
||||
};
|
||||
tempImg.onerror = function() {
|
||||
// 如果图片加载失败，使用占位图
|
||||
img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f0f0f8"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23999"%3E图片加载中%3C/text%3E%3C/svg%3E';
|
||||
img.classList.add('error');
|
||||
};
|
||||
tempImg.src = src;
|
||||
|
||||
img.removeAttribute('data-src');
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
}
|
||||
|
||||
// 平滑滚动
|
||||
function initSmoothScroll() {
|
||||
// 为所有锚点链接添加平滑滚动
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const target = document.querySelector(targetId);
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 更新统计数据 - 电商运营数据
|
||||
function updateStats() {
|
||||
// 动画数字增长效果 - 财经商贸相关数据
|
||||
const stats = [
|
||||
{ selector: '.customer-insights', value: 3, suffix: '万+' },
|
||||
{ selector: '.competitor-analysis', value: 12, suffix: '个' },
|
||||
{ selector: '.product-selection', value: 89, suffix: '%' },
|
||||
{ selector: '.design-quality', value: 95, suffix: '%' },
|
||||
{ selector: '.content-reach', value: 50, suffix: '万+' },
|
||||
{ selector: '.ad-roi', value: 420, suffix: '%' },
|
||||
{ selector: '.monthly-sales', value: 280, suffix: '万元' },
|
||||
{ selector: '.growth-rate', value: 156, suffix: '%' }
|
||||
];
|
||||
|
||||
stats.forEach(stat => {
|
||||
const element = document.querySelector(stat.selector);
|
||||
if (element) {
|
||||
animateValue(element, 0, stat.value, 2000, stat.suffix);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 数字动画函数
|
||||
function animateValue(element, start, end, duration, suffix = '') {
|
||||
const startTime = performance.now();
|
||||
|
||||
function update(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// 使用缓动函数
|
||||
const easeOutQuad = progress * (2 - progress);
|
||||
const current = Math.floor(start + (end - start) * easeOutQuad);
|
||||
|
||||
element.textContent = current + suffix;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
// 产品展示切换
|
||||
function initProductShowcase() {
|
||||
const productCards = document.querySelectorAll('.product-card');
|
||||
|
||||
productCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-8px) scale(1.02)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', function(e) {
|
||||
if (e.target.tagName === 'IMG') {
|
||||
console.warn('图片加载失败:', e.target.src);
|
||||
e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f0f0f8"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23999"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E';
|
||||
e.target.classList.add('error');
|
||||
}
|
||||
}, true);
|
||||
|
||||
// 移动端优化
|
||||
if ('ontouchstart' in window) {
|
||||
document.body.classList.add('touch-device');
|
||||
|
||||
// 移动端点击优化
|
||||
let touchStartTime;
|
||||
document.addEventListener('touchstart', () => {
|
||||
touchStartTime = Date.now();
|
||||
});
|
||||
|
||||
document.addEventListener('touchend', (e) => {
|
||||
const touchEndTime = Date.now();
|
||||
if (touchEndTime - touchStartTime < 200) {
|
||||
// 快速点击
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 性能监控
|
||||
if (window.performance && window.performance.timing) {
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
const timing = window.performance.timing;
|
||||
const loadTime = timing.loadEventEnd - timing.navigationStart;
|
||||
console.log(`页面加载时间: ${loadTime}ms`);
|
||||
|
||||
// 如果加载时间过长，提示用户
|
||||
if (loadTime > 3000) {
|
||||
console.warn('页面加载时间较长，可能需要优化');
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
|
||||
// 主题切换功能
|
||||
function initThemeToggle() {
|
||||
const themeToggleBtn = document.getElementById('themeToggleBtn');
|
||||
|
||||
// 从localStorage读取用户的主题偏好
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
// 如果没有保存的偏好，默认使用暗色主题
|
||||
if (savedTheme === 'dark' || savedTheme === null) {
|
||||
document.body.classList.add('dark-theme');
|
||||
}
|
||||
|
||||
// 点击切换主题
|
||||
if (themeToggleBtn) {
|
||||
themeToggleBtn.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark-theme');
|
||||
|
||||
// 保存用户偏好
|
||||
if (document.body.classList.contains('dark-theme')) {
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
|
||||
// 重新初始化图标以确保正确显示
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
1
web_frontend/web_result/order-classes/food/agent-avatars
Symbolic link
1
web_frontend/web_result/order-classes/food/agent-avatars
Symbolic link
@@ -0,0 +1 @@
|
||||
../../../../data/订单班文档资料/食品/agent头像
|
||||
1704
web_frontend/web_result/order-classes/food/css/styles.css
Normal file
1704
web_frontend/web_result/order-classes/food/css/styles.css
Normal file
File diff suppressed because it is too large
Load Diff
748
web_frontend/web_result/order-classes/food/css/styles.old.css
Normal file
748
web_frontend/web_result/order-classes/food/css/styles.old.css
Normal file
@@ -0,0 +1,748 @@
|
||||
/* 青莳轻食 - 深色惊艳设计系统 */
|
||||
|
||||
/* ========== 设计变量 ========== */
|
||||
:root {
|
||||
/* 深色主题色板 */
|
||||
--bg-dark: #0f1810; /* 深色背景 */
|
||||
--bg-semi-dark: rgba(15, 24, 16, 0.85); /* 半透明深色 */
|
||||
--bg-overlay: rgba(26, 46, 26, 0.75); /* 深绿遮罩 */
|
||||
--bg-card: rgba(45, 80, 22, 0.65); /* 卡片背景 */
|
||||
--primary-dark: #1a2e1a; /* 主色深绿 */
|
||||
--primary-green: #2d5016; /* 主色绿 */
|
||||
--accent-gold: #d4af37; /* 金色强调 */
|
||||
--accent-gold-light: #f4d03f; /* 浅金色 */
|
||||
--text-light: #f5f5f0; /* 浅色文字 */
|
||||
--text-gray: #b8b8a8; /* 灰色文字 */
|
||||
--border-light: rgba(212, 175, 55, 0.2); /* 金色边框 */
|
||||
|
||||
/* 间距系统 - 针对大屏幕优化 */
|
||||
--spacing-xs: 0.75rem; /* 12px */
|
||||
--spacing-sm: 1.25rem; /* 20px */
|
||||
--spacing-md: 2rem; /* 32px */
|
||||
--spacing-lg: 3rem; /* 48px */
|
||||
--spacing-xl: 4rem; /* 64px */
|
||||
--spacing-2xl: 6rem; /* 96px */
|
||||
--spacing-3xl: 8rem; /* 128px */
|
||||
|
||||
/* 字体系统 */
|
||||
--font-primary: 'Inter', 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
--font-display: 'Inter', sans-serif;
|
||||
|
||||
/* 字体大小 - 针对大屏幕优化 */
|
||||
--text-xs: 0.875rem; /* 14px */
|
||||
--text-sm: 1rem; /* 16px */
|
||||
--text-base: 1.125rem; /* 18px */
|
||||
--text-lg: 1.375rem; /* 22px */
|
||||
--text-xl: 1.625rem; /* 26px */
|
||||
--text-2xl: 2rem; /* 32px */
|
||||
--text-3xl: 2.5rem; /* 40px */
|
||||
--text-4xl: 3rem; /* 48px */
|
||||
--text-5xl: 4rem; /* 64px */
|
||||
|
||||
/* 字重 */
|
||||
--font-light: 300;
|
||||
--font-normal: 400;
|
||||
--font-medium: 500;
|
||||
--font-semibold: 600;
|
||||
--font-bold: 700;
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 0.375rem;
|
||||
--radius-md: 0.5rem;
|
||||
--radius-lg: 0.75rem;
|
||||
--radius-xl: 1rem;
|
||||
--radius-2xl: 1.5rem;
|
||||
--radius-full: 9999px;
|
||||
|
||||
/* 阴影 - 深色主题 */
|
||||
--shadow-sm: 0 2px 8px rgba(0,0,0,0.4);
|
||||
--shadow-md: 0 4px 12px rgba(0,0,0,0.5);
|
||||
--shadow-lg: 0 10px 20px rgba(0,0,0,0.6);
|
||||
--shadow-xl: 0 20px 30px rgba(0,0,0,0.7);
|
||||
--shadow-gold: 0 4px 16px rgba(212, 175, 55, 0.3);
|
||||
|
||||
/* 过渡 */
|
||||
--transition-fast: 150ms ease;
|
||||
--transition-base: 250ms ease;
|
||||
--transition-slow: 350ms ease;
|
||||
|
||||
/* 布局 */
|
||||
--container-max: 1600px; /* 增加最大宽度适配1920屏幕 */
|
||||
}
|
||||
|
||||
/* ========== 重置样式 ========== */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: var(--font-primary);
|
||||
font-size: var(--text-base);
|
||||
line-height: 1.6;
|
||||
color: var(--text-light);
|
||||
background-color: var(--bg-dark);
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
/* ========== Hero 区域 - 全屏图片背景 ========== */
|
||||
.hero {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background:
|
||||
linear-gradient(135deg, rgba(15, 24, 16, 0.75) 0%, rgba(45, 80, 22, 0.85) 100%),
|
||||
url('https://images.unsplash.com/photo-1540189549336-e6e99c3679fe?w=1920&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.hero::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image:
|
||||
radial-gradient(circle at 20% 50%, rgba(212, 175, 55, 0.1) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
|
||||
pointer-events: none;
|
||||
animation: glow 8s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes glow {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.6; }
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
text-align: center;
|
||||
color: var(--text-light);
|
||||
z-index: 1;
|
||||
position: relative;
|
||||
padding: var(--spacing-xl);
|
||||
max-width: 900px;
|
||||
}
|
||||
|
||||
.hero-badge {
|
||||
display: inline-block;
|
||||
padding: var(--spacing-md) var(--spacing-xl);
|
||||
background: rgba(212, 175, 55, 0.15);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-radius: var(--radius-full);
|
||||
font-size: var(--text-lg);
|
||||
font-weight: var(--font-semibold);
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
border: 3px solid var(--accent-gold);
|
||||
box-shadow: var(--shadow-gold);
|
||||
text-transform: uppercase;
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.hero-badge:hover {
|
||||
background: rgba(212, 175, 55, 0.25);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-size: clamp(3.5rem, 10vw, 6.5rem);
|
||||
font-weight: var(--font-bold);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
letter-spacing: -0.02em;
|
||||
line-height: 1.1;
|
||||
color: var(--accent-gold-light);
|
||||
text-shadow: 0 6px 30px rgba(0,0,0,0.8), 0 0 60px rgba(212, 175, 55, 0.4);
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: clamp(1.5rem, 4vw, 2.5rem);
|
||||
font-weight: var(--font-light);
|
||||
opacity: 0.95;
|
||||
margin-bottom: var(--spacing-xl);
|
||||
color: var(--text-light);
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
font-size: var(--text-xl);
|
||||
opacity: 0.85;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
/* ========== 导航 - 深色玻璃态 ========== */
|
||||
.nav {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
background: rgba(15, 24, 16, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
padding: var(--spacing-md) 0;
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: var(--spacing-sm);
|
||||
flex-wrap: wrap;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: var(--spacing-sm) var(--spacing-lg);
|
||||
background: rgba(45, 80, 22, 0.3);
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid var(--border-light);
|
||||
border-radius: var(--radius-lg);
|
||||
cursor: pointer;
|
||||
transition: all var(--transition-base);
|
||||
font-weight: var(--font-medium);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xs);
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
.nav-item:hover {
|
||||
background: rgba(212, 175, 55, 0.2);
|
||||
color: var(--accent-gold-light);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: var(--shadow-gold);
|
||||
}
|
||||
|
||||
.nav-item.active {
|
||||
background: rgba(212, 175, 55, 0.3);
|
||||
color: var(--accent-gold-light);
|
||||
border-color: var(--accent-gold);
|
||||
box-shadow: var(--shadow-gold);
|
||||
}
|
||||
|
||||
/* ========== 内容区块 - 图片背景 ========== */
|
||||
.section {
|
||||
padding: var(--spacing-3xl) 0;
|
||||
background: var(--bg-dark);
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 深色图片背景 - 奇数区块 */
|
||||
.section:nth-child(odd) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(15, 24, 16, 0.95) 0%, rgba(15, 24, 16, 0.92) 100%),
|
||||
url('https://images.unsplash.com/photo-1512621776951-a57141f2eefd?w=1920&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
/* 深色图片背景 - 偶数区块 */
|
||||
.section:nth-child(even) {
|
||||
background-image:
|
||||
linear-gradient(to bottom, rgba(26, 46, 26, 0.95) 0%, rgba(26, 46, 26, 0.92) 100%),
|
||||
url('https://images.unsplash.com/photo-1490645935967-10de6ba17061?w=1920&q=80');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-attachment: fixed;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: var(--container-max);
|
||||
margin: 0 auto;
|
||||
padding: 0 var(--spacing-md);
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-xl);
|
||||
margin-bottom: var(--spacing-3xl);
|
||||
padding: var(--spacing-2xl);
|
||||
background: rgba(45, 80, 22, 0.4);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
border-radius: var(--radius-2xl);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-2xl);
|
||||
}
|
||||
|
||||
.agent-avatar {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border-radius: var(--radius-xl);
|
||||
object-fit: cover;
|
||||
border: 4px solid var(--accent-gold);
|
||||
box-shadow: var(--shadow-gold);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.agent-avatar:hover {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 20px rgba(212, 175, 55, 0.5);
|
||||
}
|
||||
|
||||
.agent-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.agent-name {
|
||||
font-size: var(--text-lg);
|
||||
color: var(--accent-gold);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
margin-bottom: var(--spacing-sm);
|
||||
font-weight: var(--font-semibold);
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--text-4xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--text-light);
|
||||
letter-spacing: -0.01em;
|
||||
text-shadow: 0 4px 20px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
max-width: 100%; /* 使用全宽 */
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.expert-intro {
|
||||
background: rgba(45, 80, 22, 0.5);
|
||||
backdrop-filter: blur(15px);
|
||||
-webkit-backdrop-filter: blur(15px);
|
||||
border-radius: var(--radius-2xl);
|
||||
padding: var(--spacing-2xl);
|
||||
margin-bottom: var(--spacing-3xl);
|
||||
border: 2px solid var(--border-light);
|
||||
box-shadow: var(--shadow-2xl);
|
||||
}
|
||||
|
||||
.expert-intro h3 {
|
||||
font-size: var(--text-2xl);
|
||||
color: var(--accent-gold-light);
|
||||
margin-bottom: var(--spacing-lg);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--spacing-md);
|
||||
}
|
||||
|
||||
.expert-intro p {
|
||||
color: var(--text-gray);
|
||||
line-height: 1.8;
|
||||
font-size: var(--text-lg);
|
||||
}
|
||||
|
||||
/* ========== 网格布局 - 针对大屏幕优化,更大气的布局 ========== */
|
||||
.grid {
|
||||
display: grid;
|
||||
gap: var(--spacing-2xl);
|
||||
}
|
||||
|
||||
.grid-2 {
|
||||
grid-template-columns: repeat(2, 1fr); /* 固定2列,每列更宽 */
|
||||
}
|
||||
|
||||
.grid-3 {
|
||||
grid-template-columns: repeat(2, 1fr); /* 3列改为2列,图片更大 */
|
||||
}
|
||||
|
||||
.grid-4 {
|
||||
grid-template-columns: repeat(3, 1fr); /* 4列改为3列,图片更大 */
|
||||
}
|
||||
|
||||
/* ========== 卡片 - 图片优先布局 ========== */
|
||||
.card {
|
||||
background: rgba(45, 80, 22, 0.65);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-2xl);
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--border-light);
|
||||
transition: all var(--transition-base);
|
||||
box-shadow: var(--shadow-xl);
|
||||
padding: 0; /* 移除内边距,让图片可以占满 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-xl), var(--shadow-gold);
|
||||
border-color: var(--accent-gold);
|
||||
}
|
||||
|
||||
.card-header {
|
||||
padding: var(--spacing-xl);
|
||||
background: rgba(26, 46, 26, 0.8);
|
||||
border-bottom: 2px solid var(--border-light);
|
||||
order: 2; /* 标题放在图片下方 */
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--accent-gold-light);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: var(--spacing-xl);
|
||||
order: 3; /* 内容放在最后 */
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
/* ========== 图片容器 - 突出展示 - 超大气布局 ========== */
|
||||
.image-container {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/2; /* 更宽的比例,3:2黄金比例 */
|
||||
overflow: hidden;
|
||||
border-radius: 0; /* 在卡片内时不需要圆角 */
|
||||
margin-bottom: 0; /* 移除底部边距 */
|
||||
background: rgba(0,0,0,0.5);
|
||||
position: relative;
|
||||
box-shadow: none; /* 卡片本身有阴影 */
|
||||
border: none; /* 移除边框 */
|
||||
transition: all var(--transition-base);
|
||||
order: 1; /* 图片放在最前面 */
|
||||
flex-shrink: 0; /* 防止图片被压缩 */
|
||||
}
|
||||
|
||||
.image-container:hover {
|
||||
/* 移除hover效果,因为卡片本身有hover */
|
||||
}
|
||||
|
||||
.image-container img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-slow);
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
|
||||
.image-container:hover img {
|
||||
transform: scale(1.1);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.image-caption {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: var(--spacing-md);
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
|
||||
color: var(--text-light);
|
||||
font-size: var(--text-sm);
|
||||
font-weight: var(--font-medium);
|
||||
text-align: center;
|
||||
transform: translateY(100%);
|
||||
transition: transform var(--transition-base);
|
||||
}
|
||||
|
||||
.image-container:hover .image-caption {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* ========== 列表 ========== */
|
||||
.feature-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.feature-list li {
|
||||
padding: var(--spacing-sm) 0;
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
color: var(--text-gray);
|
||||
transition: all var(--transition-fast);
|
||||
}
|
||||
|
||||
.feature-list li:hover {
|
||||
color: var(--accent-gold-light);
|
||||
padding-left: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.feature-list li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
/* ========== 统计数据 ========== */
|
||||
.stats {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
padding: var(--spacing-lg);
|
||||
background: rgba(45, 80, 22, 0.4);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid var(--border-light);
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
padding: var(--spacing-md);
|
||||
border-radius: var(--radius-md);
|
||||
background: rgba(26, 46, 26, 0.5);
|
||||
transition: all var(--transition-base);
|
||||
}
|
||||
|
||||
.stat-item:hover {
|
||||
background: rgba(212, 175, 55, 0.2);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: var(--text-sm);
|
||||
color: var(--text-gray);
|
||||
margin-bottom: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: var(--font-bold);
|
||||
color: var(--accent-gold-light);
|
||||
text-shadow: 0 2px 8px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
/* ========== 表格 ========== */
|
||||
.table-container {
|
||||
overflow-x: auto;
|
||||
margin: var(--spacing-xl) 0;
|
||||
border-radius: var(--radius-lg);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: rgba(26, 46, 26, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-lg);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
th {
|
||||
background: rgba(45, 80, 22, 0.8);
|
||||
color: var(--accent-gold-light);
|
||||
padding: var(--spacing-md);
|
||||
text-align: left;
|
||||
font-weight: var(--font-semibold);
|
||||
border-bottom: 2px solid var(--accent-gold);
|
||||
}
|
||||
|
||||
td {
|
||||
padding: var(--spacing-md);
|
||||
border-bottom: 1px solid var(--border-light);
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
tr:hover {
|
||||
background: rgba(212, 175, 55, 0.1);
|
||||
}
|
||||
|
||||
/* ========== 产品展示 - 超大气布局 ========== */
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr); /* 固定2列,产品卡片更大 */
|
||||
gap: var(--spacing-2xl);
|
||||
margin: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
.product-card {
|
||||
background: rgba(45, 80, 22, 0.6);
|
||||
backdrop-filter: blur(10px);
|
||||
border-radius: var(--radius-2xl);
|
||||
overflow: hidden;
|
||||
border: 2px solid var(--border-light);
|
||||
transition: all var(--transition-base);
|
||||
box-shadow: var(--shadow-xl);
|
||||
padding: 0; /* 移除内边距 */
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.product-card:hover {
|
||||
transform: translateY(-8px);
|
||||
box-shadow: var(--shadow-xl), var(--shadow-gold);
|
||||
border-color: var(--accent-gold);
|
||||
}
|
||||
|
||||
.product-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 3/2; /* 更宽的比例,展示更多细节 */
|
||||
object-fit: cover;
|
||||
transition: transform var(--transition-slow);
|
||||
filter: brightness(0.9);
|
||||
order: 1; /* 图片放在最前面 */
|
||||
}
|
||||
|
||||
.product-card:hover .product-image {
|
||||
transform: scale(1.05);
|
||||
filter: brightness(1.0);
|
||||
}
|
||||
|
||||
.product-info {
|
||||
padding: var(--spacing-xl);
|
||||
background: rgba(26, 46, 26, 0.5);
|
||||
order: 2; /* 信息放在图片下方 */
|
||||
}
|
||||
|
||||
.product-name {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: var(--font-semibold);
|
||||
color: var(--accent-gold-light);
|
||||
margin-bottom: var(--spacing-sm);
|
||||
}
|
||||
|
||||
.product-desc {
|
||||
font-size: var(--text-base);
|
||||
color: var(--text-gray);
|
||||
}
|
||||
|
||||
/* ========== 响应式 ========== */
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--spacing-sm: 0.75rem;
|
||||
--spacing-md: 1rem;
|
||||
--spacing-lg: 1.5rem;
|
||||
--spacing-xl: 2rem;
|
||||
--spacing-2xl: 3rem;
|
||||
--spacing-3xl: 4rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
.section:nth-child(odd),
|
||||
.section:nth-child(even) {
|
||||
background-attachment: scroll;
|
||||
}
|
||||
|
||||
.hero-content {
|
||||
padding: var(--spacing-lg);
|
||||
}
|
||||
|
||||
.nav-container {
|
||||
gap: var(--spacing-xs);
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
padding: var(--spacing-xs) var(--spacing-md);
|
||||
font-size: var(--text-sm);
|
||||
}
|
||||
|
||||
.section {
|
||||
padding: var(--spacing-2xl) 0;
|
||||
}
|
||||
|
||||
.grid-2,
|
||||
.grid-3,
|
||||
.grid-4 {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stats {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== 动画 ========== */
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.fade-in {
|
||||
animation: fadeIn 0.6s ease forwards;
|
||||
}
|
||||
|
||||
.slide-in {
|
||||
animation: slideIn 0.6s ease forwards;
|
||||
}
|
||||
|
||||
/* ========== 工具类 ========== */
|
||||
.text-center { text-align: center; }
|
||||
.text-left { text-align: left; }
|
||||
.text-right { text-align: right; }
|
||||
|
||||
.mt-sm { margin-top: var(--spacing-sm); }
|
||||
.mt-md { margin-top: var(--spacing-md); }
|
||||
.mt-lg { margin-top: var(--spacing-lg); }
|
||||
.mt-xl { margin-top: var(--spacing-xl); }
|
||||
|
||||
.mb-sm { margin-bottom: var(--spacing-sm); }
|
||||
.mb-md { margin-bottom: var(--spacing-md); }
|
||||
.mb-lg { margin-bottom: var(--spacing-lg); }
|
||||
.mb-xl { margin-bottom: var(--spacing-xl); }
|
||||
|
||||
.hidden { display: none; }
|
||||
.block { display: block; }
|
||||
.flex { display: flex; }
|
||||
.grid { display: grid; }
|
||||
|
||||
.gap-sm { gap: var(--spacing-sm); }
|
||||
.gap-md { gap: var(--spacing-md); }
|
||||
.gap-lg { gap: var(--spacing-lg); }
|
||||
|
||||
/* ========== 图片加载状态 ========== */
|
||||
img {
|
||||
transition: opacity var(--transition-base);
|
||||
}
|
||||
|
||||
img.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
img.error {
|
||||
opacity: 0.5;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
499
web_frontend/web_result/order-classes/food/index.old.html
Normal file
499
web_frontend/web_result/order-classes/food/index.old.html
Normal file
@@ -0,0 +1,499 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
|
||||
<title>青莳轻食 - AI多智能体协同创业方案</title>
|
||||
|
||||
<!-- 外部样式 -->
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
|
||||
<!-- 字体 -->
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<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;600;700;900&display=swap" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
<!-- Hero 区域 -->
|
||||
<section class="hero">
|
||||
<div class="hero-content">
|
||||
<div class="hero-badge">AI 多智能体协同</div>
|
||||
<h1 class="hero-title">青莳轻食</h1>
|
||||
<p class="hero-subtitle">中高端个性化轻食店铺经营方案</p>
|
||||
<p class="hero-description">🤖 由 7 位 AI 专家联合打造</p>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 导航 -->
|
||||
<nav class="nav">
|
||||
<div class="nav-container">
|
||||
<div class="nav-item active">📊 市场</div>
|
||||
<div class="nav-item">🎨 品牌</div>
|
||||
<div class="nav-item">📍 选址</div>
|
||||
<div class="nav-item">🍽️ 菜单</div>
|
||||
<div class="nav-item">⚙️ 运营</div>
|
||||
<div class="nav-item">👥 团队</div>
|
||||
<div class="nav-item">💰 财务</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Section 1: 市场分析 -->
|
||||
<section class="section" id="market">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img class="agent-avatar" src="agent-avatars/餐饮市场调研专家.jpeg" alt="Agent"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23f0f0e8%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-size=%2232%22%3E🤖%3C/text%3E%3C/svg%3E'">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">🤖 Agent 01 · 餐饮市场调研专家</div>
|
||||
<h2 class="section-title">市场分析与定位</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3>📊 专家分析报告</h3>
|
||||
<p>基于2025年餐饮市场数据,轻食赛道呈现持续增长态势。健康意识觉醒、中产阶级崛起、快节奏生活方式共同驱动市场需求。本方案针对25-40岁中高收入人群,主攻商务办公区与高端社区,提供高品质、个性化的轻食解决方案。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🎯 目标客群</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/健身宣传代言.jpg" alt="目标客群">
|
||||
</div>
|
||||
<div class="image-caption">健康生活方式倡导者</div>
|
||||
<ul class="feature-list">
|
||||
<li>✓ 年龄段: 25-40 岁</li>
|
||||
<li>✓ 收入: 月收入 8000-30000 元</li>
|
||||
<li>✓ 职业: 白领、健身爱好者、孕产群体</li>
|
||||
<li>✓ 特征: 健康意识强、追求品质生活</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📈 市场趋势</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/市场宣传营销.jpg" alt="市场趋势">
|
||||
</div>
|
||||
<div class="image-caption">2025年轻食市场规模持续增长</div>
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">市场规模增长</div>
|
||||
<div class="stat-value">15%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">健康意识提升</div>
|
||||
<div class="stat-value">20%</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">外卖渗透率</div>
|
||||
<div class="stat-value">65%</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 2: 品牌设计 -->
|
||||
<section class="section" id="brand">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img class="agent-avatar" src="agent-avatars/餐饮品牌设计专家.jpeg" alt="Agent"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23f0f0e8%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-size=%2232%22%3E🤖%3C/text%3E%3C/svg%3E'">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">🤖 Agent 02 · 品牌设计专家</div>
|
||||
<h2 class="section-title">品牌定位与形象设计</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3>🎨 专家设计理念</h3>
|
||||
<p>"青莳"取"青春"与"莳种"之意,象征新鲜、健康与生命力。品牌视觉采用清新绿色系,传递自然、健康、活力的品牌形象。Logo以简洁的叶片元素为核心,搭配现代字体,体现专业与品质。整体设计语言贯穿门店、包装、线上平台,形成统一的品牌识别系统。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🏷️ 品牌核心</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/品牌LOGO.jpg" alt="品牌LOGO">
|
||||
</div>
|
||||
<div class="image-caption">青莳轻食品牌标识</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🏪 店面形象</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/店面图片_正门.jpg" alt="店面外观">
|
||||
</div>
|
||||
<div class="image-caption">现代简约风格门店设计</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 3: 选址装修 -->
|
||||
<section class="section" id="location">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img class="agent-avatar" src="agent-avatars/餐厅选址装修专家.jpeg" alt="Agent"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23f0f0e8%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-size=%2232%22%3E🤖%3C/text%3E%3C/svg%3E'">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">🤖 Agent 03 · 商业选址专家</div>
|
||||
<h2 class="section-title">店铺选址与布局规划</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3>📍 专家选址建议</h3>
|
||||
<p>基于目标客群画像与消费行为分析,推荐选址于甲级写字楼、高端商圈、品质社区三大核心场景。面积控制在80-150㎡,既能保证堂食体验,又能高效运营外卖业务。店内采用开放式厨房设计,透明化操作流程,增强顾客信任感。动线设计遵循"点餐-制作-取餐"流程,提升运营效率。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🎯 选址标准</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/健康食材扫码溯源.jpg" alt="商圈选址">
|
||||
</div>
|
||||
<div class="image-caption">核心商圈优质点位</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📐 空间布局</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/厨房加工场景.jpg" alt="厨房布局">
|
||||
</div>
|
||||
<div class="image-caption">开放式厨房设计</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🏡 店内环境</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/店内场景_用餐区.jpg" alt="用餐环境">
|
||||
</div>
|
||||
<div class="image-caption">清新舒适的用餐环境</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 4: 菜单设计 -->
|
||||
<section class="section" id="menu">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img class="agent-avatar" src="agent-avatars/菜品研发专家.jpeg" alt="Agent"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23f0f0e8%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-size=%2232%22%3E🤖%3C/text%3E%3C/svg%3E'">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">🤖 Agent 04 · 营养菜单设计师</div>
|
||||
<h2 class="section-title">产品菜单与营养设计</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3>🍽️ 专家设计方案</h3>
|
||||
<p>菜单设计遵循"营养均衡、健康低卡、口味丰富"三大原则。产品线涵盖能量碗、沙拉、冷意面、健康饮品四大品类,满足不同场景与需求。每款产品均配有详细营养标签,标注卡路里、蛋白质、碳水、脂肪含量,并提供"减脂""增肌""均衡"等标签,便于顾客快速选择。同时提供DIY定制服务,满足个性化需求。</p>
|
||||
</div>
|
||||
|
||||
<div class="product-grid">
|
||||
<div class="product-card">
|
||||
<img data-src="images/青莳减脂专属套餐(可换酱汁).jpg" alt="减脂套餐" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">青莳减脂专属套餐</div>
|
||||
<div class="product-desc">450 kcal | 蛋白质 35g</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<img data-src="images/青莳虾仁牛油果沙拉.jpg" alt="虾仁牛油果沙拉" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">青莳虾仁牛油果沙拉</div>
|
||||
<div class="product-desc">380 kcal | 蛋白质 28g</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<img data-src="images/青莳夏季芒果鸡胸冷意面.jpg" alt="芒果鸡胸冷意面" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">青莳夏季芒果鸡胸冷意面</div>
|
||||
<div class="product-desc">520 kcal | 蛋白质 32g</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-card">
|
||||
<img data-src="images/青莳香煎牛肉能量碗.jpg" alt="香煎牛肉能量碗" class="product-image">
|
||||
<div class="product-info">
|
||||
<div class="product-name">青莳香煎牛肉能量碗</div>
|
||||
<div class="product-desc">580 kcal | 蛋白质 38g</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 5: 运营管理 -->
|
||||
<section class="section" id="operation">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img class="agent-avatar" src="agent-avatars/轻食店经营管理专家.jpeg" alt="Agent"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23f0f0e8%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-size=%2232%22%3E🤖%3C/text%3E%3C/svg%3E'">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">🤖 Agent 05 · 运营管理专家</div>
|
||||
<h2 class="section-title">运营管理与流程设计</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3>⚙️ 专家运营方案</h3>
|
||||
<p>建立"标准化+数字化"双轮驱动的运营体系。标准化涵盖食材采购、储存、制作、出餐全流程,通过SOP确保品质稳定。数字化系统包括智能点餐、库存管理、会员系统、数据分析四大模块,实现精细化运营。同时建立7×24小时冷链物流体系,保证食材新鲜度。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-3">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📋 标准化流程</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/厨房冷柜管理.jpg" alt="标准化管理">
|
||||
</div>
|
||||
<div class="image-caption">规范化食材管理</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📱 数字化系统</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/员工着装以及切配规范.jpg" alt="数字化管理">
|
||||
</div>
|
||||
<div class="image-caption">智能化运营系统</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">🔥 品质管控</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/餐盒包装.jpg" alt="品质管控">
|
||||
</div>
|
||||
<div class="image-caption">品质管控体系</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 6: 团队建设 -->
|
||||
<section class="section" id="team">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img class="agent-avatar" src="agent-avatars/餐饮团队人员管理专家.jpeg" alt="Agent"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23f0f0e8%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-size=%2232%22%3E🤖%3C/text%3E%3C/svg%3E'">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">🤖 Agent 06 · 团队建设专家</div>
|
||||
<h2 class="section-title">团队架构与人才培养</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3>👥 专家团队方案</h3>
|
||||
<p>建立"精简高效"的团队架构,单店配置8-12人。核心岗位包括店长、营养师、主厨、备餐师、收银员、配送员。店长负责整体运营,营养师提供专业咨询,主厨保证出品品质。建立完善的培训体系,新员工经过7天岗前培训+14天实操带教方能上岗。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-4">
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/店长.jpg" alt="店长">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="product-name">店长</div>
|
||||
<div class="product-desc">全面运营管理</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/厨师.jpg" alt="厨师">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="product-name">主厨</div>
|
||||
<div class="product-desc">菜品制作与品控</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/服务员.jpg" alt="服务员">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="product-name">服务员</div>
|
||||
<div class="product-desc">前台接待与服务</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="image-container">
|
||||
<img data-src="images/收银员.jpg" alt="收银员">
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="product-name">收银员</div>
|
||||
<div class="product-desc">前台收银与管理</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- Section 7: 财务规划 -->
|
||||
<section class="section" id="finance">
|
||||
<div class="container">
|
||||
<div class="section-header">
|
||||
<img class="agent-avatar" src="agent-avatars/财务预算专家.jpeg" alt="Agent"
|
||||
onerror="this.src='data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2280%22 height=%2280%22 viewBox=%220 0 80 80%22%3E%3Crect width=%2280%22 height=%2280%22 fill=%22%23f0f0e8%22/%3E%3Ctext x=%2250%25%22 y=%2250%25%22 dominant-baseline=%22middle%22 text-anchor=%22middle%22 font-size=%2232%22%3E🤖%3C/text%3E%3C/svg%3E'">
|
||||
<div class="agent-info">
|
||||
<div class="agent-name">🤖 Agent 07 · 财务分析专家</div>
|
||||
<h2 class="section-title">财务规划与投资回报</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="section-content">
|
||||
<div class="expert-intro">
|
||||
<h3>💰 专家财务分析</h3>
|
||||
<p>基于保守预估模型,单店初期投资约50万元,包括装修、设备、首批物料、营运资金。月度运营成本约15万元,涵盖租金、人力、食材、水电等。预计开业3个月后实现盈亏平衡,月营业额达20万元,月净利润4-6万元,ROI约12-15个月。</p>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-2">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">💵 初期投资</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/食材备制.jpg" alt="食材投资">
|
||||
</div>
|
||||
<div class="image-caption">优质食材采购</div>
|
||||
|
||||
<div class="table-container">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>投资项目</th>
|
||||
<th style="text-align: right;">金额(万元)</th>
|
||||
<th style="text-align: right;">占比</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>店面装修</td>
|
||||
<td style="text-align: right;">15</td>
|
||||
<td style="text-align: right;">30%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>设备采购</td>
|
||||
<td style="text-align: right;">12</td>
|
||||
<td style="text-align: right;">24%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>首批物料</td>
|
||||
<td style="text-align: right;">8</td>
|
||||
<td style="text-align: right;">16%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>品牌推广</td>
|
||||
<td style="text-align: right;">5</td>
|
||||
<td style="text-align: right;">10%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>营运资金</td>
|
||||
<td style="text-align: right;">10</td>
|
||||
<td style="text-align: right;">20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><strong>合计</strong></td>
|
||||
<td style="text-align: right;"><strong>50</strong></td>
|
||||
<td style="text-align: right;"><strong>100%</strong></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">📈 盈利预测</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="image-container">
|
||||
<img data-src="images/牛排烹饪.jpg" alt="盈利分析">
|
||||
</div>
|
||||
<div class="image-caption">高品质产品带来高回报</div>
|
||||
|
||||
<div class="stats mt-lg">
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">月营业额(稳定期)</div>
|
||||
<div class="stat-value monthly-revenue">20万</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">月净利润</div>
|
||||
<div class="stat-value monthly-profit">6万</div>
|
||||
</div>
|
||||
<div class="stat-item">
|
||||
<div class="stat-label">投资回收期</div>
|
||||
<div class="stat-value payback-period">12个月</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 外部脚本 -->
|
||||
<script src="js/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
277
web_frontend/web_result/order-classes/food/js/main.js
Normal file
277
web_frontend/web_result/order-classes/food/js/main.js
Normal file
@@ -0,0 +1,277 @@
|
||||
// 青莳轻食 - 主要JavaScript逻辑
|
||||
|
||||
// 页面初始化
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
console.log('🍃 青莳轻食页面加载完成');
|
||||
|
||||
// 初始化Lucide图标
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// 初始化组件
|
||||
initNavigation();
|
||||
initAnimations();
|
||||
initLazyLoading();
|
||||
initSmoothScroll();
|
||||
updateStats();
|
||||
initThemeToggle();
|
||||
});
|
||||
|
||||
// 导航功能
|
||||
function initNavigation() {
|
||||
const navItems = document.querySelectorAll('.nav-item');
|
||||
const sections = document.querySelectorAll('.section');
|
||||
|
||||
// 点击导航项滚动到对应区块
|
||||
navItems.forEach((item, index) => {
|
||||
item.addEventListener('click', () => {
|
||||
// 移除所有活跃状态
|
||||
navItems.forEach(nav => nav.classList.remove('active'));
|
||||
// 添加当前活跃状态
|
||||
item.classList.add('active');
|
||||
|
||||
// 滚动到对应区块
|
||||
if (sections[index]) {
|
||||
const targetSection = sections[index];
|
||||
const offsetTop = targetSection.offsetTop - 100;
|
||||
|
||||
window.scrollTo({
|
||||
top: offsetTop,
|
||||
behavior: 'smooth'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 滚动时更新导航活跃状态
|
||||
window.addEventListener('scroll', () => {
|
||||
let current = '';
|
||||
sections.forEach((section, index) => {
|
||||
const sectionTop = section.offsetTop - 150;
|
||||
if (scrollY >= sectionTop) {
|
||||
current = index;
|
||||
}
|
||||
});
|
||||
|
||||
navItems.forEach((item, index) => {
|
||||
item.classList.remove('active');
|
||||
if (index === current) {
|
||||
item.classList.add('active');
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 动画初始化
|
||||
function initAnimations() {
|
||||
// 使用 Intersection Observer 实现滚动动画
|
||||
const observerOptions = {
|
||||
root: null,
|
||||
rootMargin: '0px',
|
||||
threshold: 0.1
|
||||
};
|
||||
|
||||
const observer = new IntersectionObserver((entries) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
entry.target.classList.add('fade-in');
|
||||
observer.unobserve(entry.target);
|
||||
}
|
||||
});
|
||||
}, observerOptions);
|
||||
|
||||
// 观察所有需要动画的元素
|
||||
const animatedElements = document.querySelectorAll('.card, .expert-intro, .product-card');
|
||||
animatedElements.forEach(el => {
|
||||
el.style.opacity = '0';
|
||||
observer.observe(el);
|
||||
});
|
||||
}
|
||||
|
||||
// 图片懒加载
|
||||
function initLazyLoading() {
|
||||
const images = document.querySelectorAll('img[data-src]');
|
||||
|
||||
const imageObserver = new IntersectionObserver((entries, observer) => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
const img = entry.target;
|
||||
const src = img.getAttribute('data-src');
|
||||
|
||||
// 创建新图片对象来预加载
|
||||
const tempImg = new Image();
|
||||
tempImg.onload = function() {
|
||||
img.src = src;
|
||||
img.classList.add('loaded');
|
||||
};
|
||||
tempImg.onerror = function() {
|
||||
// 如果图片加载失败，使用占位图
|
||||
img.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f0f0e8"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23999"%3E图片加载中%3C/text%3E%3C/svg%3E';
|
||||
img.classList.add('error');
|
||||
};
|
||||
tempImg.src = src;
|
||||
|
||||
img.removeAttribute('data-src');
|
||||
observer.unobserve(img);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
images.forEach(img => {
|
||||
imageObserver.observe(img);
|
||||
});
|
||||
}
|
||||
|
||||
// 平滑滚动
|
||||
function initSmoothScroll() {
|
||||
// 为所有锚点链接添加平滑滚动
|
||||
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
|
||||
anchor.addEventListener('click', function (e) {
|
||||
e.preventDefault();
|
||||
const targetId = this.getAttribute('href');
|
||||
if (targetId === '#') return;
|
||||
|
||||
const target = document.querySelector(targetId);
|
||||
if (target) {
|
||||
target.scrollIntoView({
|
||||
behavior: 'smooth',
|
||||
block: 'start'
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 更新统计数据
|
||||
function updateStats() {
|
||||
// 动画数字增长效果
|
||||
const stats = [
|
||||
{ selector: '.delivery-time', value: 8, suffix: '分钟' },
|
||||
{ selector: '.peak-capacity', value: 150, suffix: '单/小时' },
|
||||
{ selector: '.satisfaction', value: 98, suffix: '%' },
|
||||
{ selector: '.food-quality', value: 100, suffix: '%' },
|
||||
{ selector: '.monthly-revenue', value: 30, suffix: '万元' },
|
||||
{ selector: '.monthly-profit', value: 6, suffix: '万元' },
|
||||
{ selector: '.payback-period', value: 12, suffix: '个月' },
|
||||
{ selector: '.annual-profit', value: 100, suffix: '万元' }
|
||||
];
|
||||
|
||||
stats.forEach(stat => {
|
||||
const element = document.querySelector(stat.selector);
|
||||
if (element) {
|
||||
animateValue(element, 0, stat.value, 2000, stat.suffix);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 数字动画函数
|
||||
function animateValue(element, start, end, duration, suffix = '') {
|
||||
const startTime = performance.now();
|
||||
|
||||
function update(currentTime) {
|
||||
const elapsed = currentTime - startTime;
|
||||
const progress = Math.min(elapsed / duration, 1);
|
||||
|
||||
// 使用缓动函数
|
||||
const easeOutQuad = progress * (2 - progress);
|
||||
const current = Math.floor(start + (end - start) * easeOutQuad);
|
||||
|
||||
element.textContent = current + suffix;
|
||||
|
||||
if (progress < 1) {
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
}
|
||||
|
||||
requestAnimationFrame(update);
|
||||
}
|
||||
|
||||
// 产品展示切换
|
||||
function initProductShowcase() {
|
||||
const productCards = document.querySelectorAll('.product-card');
|
||||
|
||||
productCards.forEach(card => {
|
||||
card.addEventListener('mouseenter', function() {
|
||||
this.style.transform = 'translateY(-8px) scale(1.02)';
|
||||
});
|
||||
|
||||
card.addEventListener('mouseleave', function() {
|
||||
this.style.transform = 'translateY(0) scale(1)';
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 错误处理
|
||||
window.addEventListener('error', function(e) {
|
||||
if (e.target.tagName === 'IMG') {
|
||||
console.warn('图片加载失败:', e.target.src);
|
||||
e.target.src = 'data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300"%3E%3Crect width="400" height="300" fill="%23f0f0e8"/%3E%3Ctext x="50%25" y="50%25" dominant-baseline="middle" text-anchor="middle" font-family="system-ui" font-size="20" fill="%23999"%3E图片暂时无法显示%3C/text%3E%3C/svg%3E';
|
||||
e.target.classList.add('error');
|
||||
}
|
||||
}, true);
|
||||
|
||||
// 移动端优化
|
||||
if ('ontouchstart' in window) {
|
||||
document.body.classList.add('touch-device');
|
||||
|
||||
// 移动端点击优化
|
||||
let touchStartTime;
|
||||
document.addEventListener('touchstart', () => {
|
||||
touchStartTime = Date.now();
|
||||
});
|
||||
|
||||
document.addEventListener('touchend', (e) => {
|
||||
const touchEndTime = Date.now();
|
||||
if (touchEndTime - touchStartTime < 200) {
|
||||
// 快速点击
|
||||
e.preventDefault();
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 性能监控
|
||||
if (window.performance && window.performance.timing) {
|
||||
window.addEventListener('load', () => {
|
||||
setTimeout(() => {
|
||||
const timing = window.performance.timing;
|
||||
const loadTime = timing.loadEventEnd - timing.navigationStart;
|
||||
console.log(`页面加载时间: ${loadTime}ms`);
|
||||
|
||||
// 如果加载时间过长，提示用户
|
||||
if (loadTime > 3000) {
|
||||
console.warn('页面加载时间较长，可能需要优化');
|
||||
}
|
||||
}, 0);
|
||||
});
|
||||
}
|
||||
// 主题切换功能
|
||||
function initThemeToggle() {
|
||||
const themeToggleBtn = document.getElementById('themeToggleBtn');
|
||||
|
||||
// 从localStorage读取用户的主题偏好
|
||||
const savedTheme = localStorage.getItem('theme');
|
||||
// 如果没有保存的偏好，默认使用暗色主题
|
||||
if (savedTheme === 'dark' || savedTheme === null) {
|
||||
document.body.classList.add('dark-theme');
|
||||
}
|
||||
|
||||
// 点击切换主题
|
||||
if (themeToggleBtn) {
|
||||
themeToggleBtn.addEventListener('click', () => {
|
||||
document.body.classList.toggle('dark-theme');
|
||||
|
||||
// 保存用户偏好
|
||||
if (document.body.classList.contains('dark-theme')) {
|
||||
localStorage.setItem('theme', 'dark');
|
||||
} else {
|
||||
localStorage.setItem('theme', 'light');
|
||||
}
|
||||
|
||||
// 重新初始化图标以确保正确显示
|
||||
if (typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
!.vscode/extensions.json
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
@@ -1,73 +0,0 @@
|
||||
# React + TypeScript + Vite
|
||||
|
||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
||||
|
||||
Currently, two official plugins are available:
|
||||
|
||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
|
||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
||||
|
||||
## React Compiler
|
||||
|
||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
||||
|
||||
## Expanding the ESLint configuration
|
||||
|
||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
||||
|
||||
```js
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
|
||||
// Remove tseslint.configs.recommended and replace with this
|
||||
tseslint.configs.recommendedTypeChecked,
|
||||
// Alternatively, use this for stricter rules
|
||||
tseslint.configs.strictTypeChecked,
|
||||
// Optionally, add this for stylistic rules
|
||||
tseslint.configs.stylisticTypeChecked,
|
||||
|
||||
// Other configs...
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
|
||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
||||
|
||||
```js
|
||||
// eslint.config.js
|
||||
import reactX from 'eslint-plugin-react-x'
|
||||
import reactDom from 'eslint-plugin-react-dom'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
// Other configs...
|
||||
// Enable lint rules for React
|
||||
reactX.configs['recommended-typescript'],
|
||||
// Enable lint rules for React DOM
|
||||
reactDom.configs.recommended,
|
||||
],
|
||||
languageOptions: {
|
||||
parserOptions: {
|
||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
||||
tsconfigRootDir: import.meta.dirname,
|
||||
},
|
||||
// other options...
|
||||
},
|
||||
},
|
||||
])
|
||||
```
|
||||
@@ -1,23 +0,0 @@
|
||||
import js from '@eslint/js'
|
||||
import globals from 'globals'
|
||||
import reactHooks from 'eslint-plugin-react-hooks'
|
||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
||||
import tseslint from 'typescript-eslint'
|
||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
||||
|
||||
export default defineConfig([
|
||||
globalIgnores(['dist']),
|
||||
{
|
||||
files: ['**/*.{ts,tsx}'],
|
||||
extends: [
|
||||
js.configs.recommended,
|
||||
tseslint.configs.recommended,
|
||||
reactHooks.configs['recommended-latest'],
|
||||
reactRefresh.configs.vite,
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 2020,
|
||||
globals: globals.browser,
|
||||
},
|
||||
},
|
||||
])
|
||||
@@ -1,13 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>react-app</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,38 +0,0 @@
|
||||
{
|
||||
"name": "react-app",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc -b && vite build",
|
||||
"lint": "eslint .",
|
||||
"preview": "vite preview"
|
||||
},
|
||||
"dependencies": {
|
||||
"@gsap/react": "^2.1.2",
|
||||
"gsap": "^3.13.0",
|
||||
"lucide-react": "^0.544.0",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-intersection-observer": "^9.16.0",
|
||||
"zustand": "^5.0.8"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.36.0",
|
||||
"@types/node": "^24.6.1",
|
||||
"@types/react": "^19.1.13",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@vitejs/plugin-react": "^5.0.3",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"eslint": "^9.36.0",
|
||||
"eslint-plugin-react-hooks": "^5.2.0",
|
||||
"eslint-plugin-react-refresh": "^0.4.20",
|
||||
"globals": "^16.4.0",
|
||||
"postcss": "^8.5.6",
|
||||
"tailwindcss": "^4.1.13",
|
||||
"typescript": "~5.8.3",
|
||||
"typescript-eslint": "^8.44.0",
|
||||
"vite": "^7.1.7"
|
||||
}
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 1.5 KiB |
@@ -1,42 +0,0 @@
|
||||
#root {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 6em;
|
||||
padding: 1.5em;
|
||||
will-change: filter;
|
||||
transition: filter 300ms;
|
||||
}
|
||||
.logo:hover {
|
||||
filter: drop-shadow(0 0 2em #646cffaa);
|
||||
}
|
||||
.logo.react:hover {
|
||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
||||
}
|
||||
|
||||
@keyframes logo-spin {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: no-preference) {
|
||||
a:nth-of-type(2) .logo {
|
||||
animation: logo-spin infinite 20s linear;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
import { useEffect } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import HeroSection from './components/HeroSection'
|
||||
import TimelineNav from './components/TimelineNav'
|
||||
import MarketResearchSection from './components/sections/MarketResearchSection'
|
||||
import BrandPositioningSection from './components/sections/BrandPositioningSection'
|
||||
import ProductDevelopmentSection from './components/sections/ProductDevelopmentSection'
|
||||
import LocationDesignSection from './components/sections/LocationDesignSection'
|
||||
import TeamBuildingSection from './components/sections/TeamBuildingSection'
|
||||
import FinancialPlanningSection from './components/sections/FinancialPlanningSection'
|
||||
import MarketingSection from './components/sections/MarketingSection'
|
||||
|
||||
// 注册GSAP插件
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
function App() {
|
||||
useEffect(() => {
|
||||
// 滚动触发动画配置
|
||||
ScrollTrigger.config({
|
||||
limitCallbacks: true,
|
||||
syncInterval: 150,
|
||||
})
|
||||
|
||||
return () => {
|
||||
ScrollTrigger.getAll().forEach(trigger => trigger.kill())
|
||||
}
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<div className="app min-h-screen bg-secondary-100">
|
||||
{/* Hero区块 */}
|
||||
<HeroSection />
|
||||
|
||||
{/* 时间线导航 */}
|
||||
<TimelineNav />
|
||||
|
||||
{/* 主要内容区域 */}
|
||||
<main className="relative">
|
||||
{/* 1. 市场调研 */}
|
||||
<MarketResearchSection />
|
||||
|
||||
{/* 2. 品牌定位 */}
|
||||
<BrandPositioningSection />
|
||||
|
||||
{/* 3. 产品开发 */}
|
||||
<ProductDevelopmentSection />
|
||||
|
||||
{/* 4. 选址设计 */}
|
||||
<LocationDesignSection />
|
||||
|
||||
{/* 5. 团队建设 */}
|
||||
<TeamBuildingSection />
|
||||
|
||||
{/* 6. 财务规划 */}
|
||||
<FinancialPlanningSection />
|
||||
|
||||
{/* 7. 营销推广 */}
|
||||
<MarketingSection />
|
||||
</main>
|
||||
|
||||
{/* 页脚 */}
|
||||
<footer className="bg-gray-900 text-white py-12 px-4">
|
||||
<div className="max-w-7xl mx-auto text-center">
|
||||
<h3 className="text-2xl font-bold mb-4">青莳轻食</h3>
|
||||
<p className="text-gray-400 mb-6">中高端个性化轻食店铺经营方案</p>
|
||||
<div className="flex justify-center gap-6 text-gray-400">
|
||||
<span>食材可溯源</span>
|
||||
<span>•</span>
|
||||
<span>营养可量化</span>
|
||||
<span>•</span>
|
||||
<span>制作可看见</span>
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-gray-800 text-sm text-gray-500">
|
||||
© 2024 青莳轻食. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default App
|
||||
@@ -1 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
||||
|
Before Width: | Height: | Size: 4.0 KiB |
@@ -1,152 +0,0 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ChevronDown } from 'lucide-react'
|
||||
|
||||
const HeroSection = () => {
|
||||
const heroRef = useRef<HTMLDivElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
// Hero标题动画
|
||||
gsap.from('.hero-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
ease: 'power3.out',
|
||||
})
|
||||
|
||||
gsap.from('.hero-subtitle', {
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
delay: 0.3,
|
||||
ease: 'power2.out',
|
||||
})
|
||||
|
||||
gsap.from('.hero-features', {
|
||||
y: 20,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
delay: 0.6,
|
||||
stagger: 0.15,
|
||||
})
|
||||
|
||||
gsap.from('.hero-cta', {
|
||||
scale: 0.9,
|
||||
opacity: 0,
|
||||
duration: 0.5,
|
||||
delay: 1,
|
||||
})
|
||||
|
||||
// 滚动提示动画
|
||||
gsap.to('.scroll-indicator', {
|
||||
y: 10,
|
||||
duration: 1.5,
|
||||
repeat: -1,
|
||||
yoyo: true,
|
||||
ease: 'power1.inOut',
|
||||
})
|
||||
}, heroRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const scrollToContent = () => {
|
||||
const targetY = window.innerHeight
|
||||
window.scrollTo({
|
||||
top: targetY,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={heroRef}
|
||||
className="hero relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-primary-500 to-primary-800 px-4 sm:px-6 lg:px-8"
|
||||
>
|
||||
{/* 背景纹理 */}
|
||||
<div className="absolute inset-0 opacity-10">
|
||||
<div
|
||||
className="absolute inset-0"
|
||||
style={{
|
||||
backgroundImage: `radial-gradient(circle at 20% 50%, rgba(255,255,255,0.2) 0%, transparent 50%),
|
||||
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.15) 0%, transparent 50%)`,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* 主要内容 */}
|
||||
<div className="relative z-10 text-center max-w-5xl mx-auto">
|
||||
{/* 主标题 */}
|
||||
<h1 className="hero-title text-5xl sm:text-6xl lg:text-7xl font-bold text-white mb-6 leading-tight">
|
||||
青莳轻食
|
||||
</h1>
|
||||
|
||||
{/* 副标题 */}
|
||||
<p className="hero-subtitle text-xl sm:text-2xl lg:text-3xl text-white/90 mb-8 font-medium">
|
||||
中高端个性化轻食店铺经营方案
|
||||
</p>
|
||||
|
||||
{/* 关键数据 */}
|
||||
<div className="hero-features mb-12 flex flex-wrap justify-center gap-6">
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-4 border border-white/20">
|
||||
<div className="text-4xl font-bold text-white mb-1">1200亿</div>
|
||||
<div className="text-white/80 text-sm">市场规模</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-4 border border-white/20">
|
||||
<div className="text-4xl font-bold text-white mb-1">18%</div>
|
||||
<div className="text-white/80 text-sm">年增长率</div>
|
||||
</div>
|
||||
<div className="bg-white/10 backdrop-blur-sm rounded-2xl px-8 py-4 border border-white/20">
|
||||
<div className="text-4xl font-bold text-white mb-1">58万</div>
|
||||
<div className="text-white/80 text-sm">首年净利润</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 三大差异化特点 */}
|
||||
<div className="hero-features grid grid-cols-1 sm:grid-cols-3 gap-4 mb-12 max-w-3xl mx-auto">
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
|
||||
<div className="text-white font-semibold mb-2">食材可溯源</div>
|
||||
<div className="text-white/70 text-sm">80%有机农场直供</div>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
|
||||
<div className="text-white font-semibold mb-2">营养可量化</div>
|
||||
<div className="text-white/70 text-sm">精确标注每份营养</div>
|
||||
</div>
|
||||
<div className="bg-white/5 backdrop-blur-sm rounded-xl p-6 border border-white/10">
|
||||
<div className="text-white font-semibold mb-2">制作可看见</div>
|
||||
<div className="text-white/70 text-sm">明厨亮灶透明化</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* CTA按钮 */}
|
||||
<div className="hero-cta flex flex-wrap justify-center gap-4">
|
||||
<button
|
||||
onClick={scrollToContent}
|
||||
className="px-8 py-4 bg-white text-primary-600 rounded-xl font-semibold
|
||||
hover:bg-white/95 transition-all duration-300 transform hover:-translate-y-1
|
||||
shadow-xl hover:shadow-2xl"
|
||||
>
|
||||
查看完整方案
|
||||
</button>
|
||||
<button
|
||||
className="px-8 py-4 border-2 border-white text-white rounded-xl font-semibold
|
||||
hover:bg-white/10 transition-all duration-300"
|
||||
>
|
||||
联系我们
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 滚动提示 */}
|
||||
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2">
|
||||
<div className="scroll-indicator flex flex-col items-center cursor-pointer" onClick={scrollToContent}>
|
||||
<span className="text-white/60 text-sm mb-2">向下滚动</span>
|
||||
<ChevronDown className="text-white/80 w-6 h-6 animate-bounce" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default HeroSection
|
||||
@@ -1,111 +0,0 @@
|
||||
import { useState, useEffect } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
|
||||
interface NavItem {
|
||||
id: string
|
||||
label: string
|
||||
icon: string
|
||||
}
|
||||
|
||||
const TimelineNav = () => {
|
||||
const [activeSection, setActiveSection] = useState('hero')
|
||||
|
||||
const navItems: NavItem[] = [
|
||||
{ id: 'market', label: '市场调研', icon: '1️⃣' },
|
||||
{ id: 'brand', label: '品牌定位', icon: '2️⃣' },
|
||||
{ id: 'product', label: '产品开发', icon: '3️⃣' },
|
||||
{ id: 'location', label: '选址设计', icon: '4️⃣' },
|
||||
{ id: 'team', label: '团队建设', icon: '5️⃣' },
|
||||
{ id: 'finance', label: '财务规划', icon: '6️⃣' },
|
||||
{ id: 'marketing', label: '营销推广', icon: '7️⃣' },
|
||||
]
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
const scrollPosition = window.scrollY + window.innerHeight / 2
|
||||
|
||||
// 检测当前滚动到哪个区块
|
||||
navItems.forEach(item => {
|
||||
const section = document.getElementById(item.id)
|
||||
if (section) {
|
||||
const { offsetTop, offsetHeight } = section
|
||||
if (scrollPosition >= offsetTop && scrollPosition < offsetTop + offsetHeight) {
|
||||
setActiveSection(item.id)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', handleScroll)
|
||||
return () => window.removeEventListener('scroll', handleScroll)
|
||||
}, [])
|
||||
|
||||
const scrollToSection = (sectionId: string) => {
|
||||
const section = document.getElementById(sectionId)
|
||||
if (section) {
|
||||
const yOffset = -80
|
||||
const y = section.getBoundingClientRect().top + window.pageYOffset + yOffset
|
||||
window.scrollTo({
|
||||
top: y,
|
||||
behavior: 'smooth'
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<nav className="fixed top-1/2 right-8 -translate-y-1/2 z-50 hidden lg:block">
|
||||
<div className="bg-white/90 backdrop-blur-sm rounded-2xl shadow-xl p-4 border border-gray-200">
|
||||
<div className="flex flex-col gap-4">
|
||||
{navItems.map((item, index) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => scrollToSection(item.id)}
|
||||
className={`group relative flex items-center gap-3 transition-all duration-300
|
||||
${activeSection === item.id ? 'scale-110' : 'hover:scale-105'}`}
|
||||
aria-label={item.label}
|
||||
>
|
||||
{/* 图标 */}
|
||||
<div
|
||||
className={`w-10 h-10 rounded-full flex items-center justify-center text-lg
|
||||
transition-all duration-300
|
||||
${
|
||||
activeSection === item.id
|
||||
? 'bg-primary-500 text-white shadow-lg'
|
||||
: 'bg-gray-100 text-gray-600 group-hover:bg-primary-100'
|
||||
}`}
|
||||
>
|
||||
{item.icon}
|
||||
</div>
|
||||
|
||||
{/* 标签 - 悬停时显示 */}
|
||||
<span
|
||||
className="absolute right-full mr-4 px-3 py-1 bg-gray-900 text-white text-sm
|
||||
rounded-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300
|
||||
whitespace-nowrap pointer-events-none"
|
||||
>
|
||||
{item.label}
|
||||
</span>
|
||||
|
||||
{/* 进度条 */}
|
||||
{activeSection === item.id && (
|
||||
<div
|
||||
className="absolute left-0 w-1 h-10 bg-primary-500 rounded-full"
|
||||
style={{ left: '-8px' }}
|
||||
/>
|
||||
)}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 进度指示器 */}
|
||||
<div className="mt-4 pt-4 border-t border-gray-200">
|
||||
<div className="text-xs text-gray-500 text-center">
|
||||
{navItems.findIndex(item => item.id === activeSection) + 1} / {navItems.length}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
)
|
||||
}
|
||||
|
||||
export default TimelineNav
|
||||
@@ -1,238 +0,0 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { Sparkles, Award, Heart, Shield } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const BrandPositioningSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.brand-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.brand-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.brand-card', {
|
||||
scale: 0.9,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2,
|
||||
scrollTrigger: {
|
||||
trigger: '.brand-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.value-item', {
|
||||
x: -30,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: '.value-item',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const brandPillars = [
|
||||
{
|
||||
icon: Sparkles,
|
||||
title: '食材可溯源',
|
||||
description: '80%有机农场直供',
|
||||
details: [
|
||||
'与认证有机农场建立长期合作',
|
||||
'每份食材附带溯源二维码',
|
||||
'实时追踪从农场到餐桌全流程',
|
||||
'定期公开供应商认证信息',
|
||||
],
|
||||
gradient: 'from-green-500 to-emerald-600',
|
||||
},
|
||||
{
|
||||
icon: Award,
|
||||
title: '营养可量化',
|
||||
description: '精确标注每份营养',
|
||||
details: [
|
||||
'专业营养师团队配方设计',
|
||||
'精确到克的营养成分标注',
|
||||
'卡路里、蛋白质、脂肪全透明',
|
||||
'提供个性化营养建议',
|
||||
],
|
||||
gradient: 'from-blue-500 to-cyan-600',
|
||||
},
|
||||
{
|
||||
icon: Heart,
|
||||
title: '制作可看见',
|
||||
description: '明厨亮灶透明化',
|
||||
details: [
|
||||
'开放式厨房设计',
|
||||
'全程可视化制作流程',
|
||||
'严格的卫生操作标准',
|
||||
'顾客可全程观看制作',
|
||||
],
|
||||
gradient: 'from-purple-500 to-pink-600',
|
||||
},
|
||||
]
|
||||
|
||||
const brandValues = [
|
||||
{ icon: '🌱', title: '健康至上', desc: '以健康为核心价值' },
|
||||
{ icon: '✨', title: '品质保证', desc: '精选优质食材' },
|
||||
{ icon: '🎯', title: '用心服务', desc: '关注每位顾客' },
|
||||
{ icon: '🔬', title: '科学配餐', desc: '营养均衡搭配' },
|
||||
{ icon: '🌍', title: '环保理念', desc: '可持续发展' },
|
||||
{ icon: '💚', title: '真诚透明', desc: '诚信经营' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="brand"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="brand-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">2️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第二阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
品牌定位与差异化
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
打造"青莳轻食"中高端个性化品牌,建立三大核心竞争优势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 品牌名称解读 */}
|
||||
<div className="brand-card mb-16 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<div className="max-w-4xl mx-auto text-center">
|
||||
<h3 className="text-5xl font-bold mb-6">青莳 QingShi</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8 text-left">
|
||||
<div>
|
||||
<div className="text-3xl mb-3">青</div>
|
||||
<p className="text-white/90 text-lg">
|
||||
代表新鲜、自然、健康的生活态度。青春活力,清新自然,是品牌的视觉基调。
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<div className="text-3xl mb-3">莳</div>
|
||||
<p className="text-white/90 text-lg">
|
||||
寓意培育、呵护与成长。如同精心培育每一道菜品,用心呵护每位顾客的健康。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 三大核心差异化特点 */}
|
||||
<div className="grid md:grid-cols-3 gap-8 mb-16">
|
||||
{brandPillars.map((pillar, index) => {
|
||||
const Icon = pillar.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="brand-card group bg-white rounded-3xl p-8 shadow-lg hover:shadow-2xl
|
||||
transition-all duration-500 border border-gray-100
|
||||
transform hover:-translate-y-2"
|
||||
>
|
||||
<div
|
||||
className={`w-16 h-16 rounded-2xl bg-gradient-to-br ${pillar.gradient}
|
||||
flex items-center justify-center mb-6
|
||||
group-hover:scale-110 transition-transform duration-300`}
|
||||
>
|
||||
<Icon className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-3">{pillar.title}</h3>
|
||||
<p className="text-primary-600 font-medium mb-6">{pillar.description}</p>
|
||||
<ul className="space-y-3">
|
||||
{pillar.details.map((detail, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2 text-gray-600">
|
||||
<Shield className="w-5 h-5 text-primary-500 flex-shrink-0 mt-0.5" />
|
||||
<span>{detail}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 品牌价值观 */}
|
||||
<div className="bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">品牌核心价值观</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{brandValues.map((value, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="value-item text-center p-4 rounded-2xl hover:bg-primary-50
|
||||
transition-all duration-300 cursor-default
|
||||
transform hover:scale-105"
|
||||
>
|
||||
<div className="text-4xl mb-3">{value.icon}</div>
|
||||
<div className="font-semibold text-gray-900 mb-1">{value.title}</div>
|
||||
<div className="text-sm text-gray-600">{value.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 目标市场定位 */}
|
||||
<div className="mt-12 grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-gradient-to-br from-primary-50 to-white rounded-3xl p-8 border border-primary-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">市场定位</h3>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p className="text-lg leading-relaxed">
|
||||
<span className="font-semibold text-primary-600">中高端轻食市场</span>
|
||||
,面向注重健康、品质和生活方式的都市白领群体
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
客单价定位在 <span className="font-semibold">35-60元</span>
|
||||
,提供高于市场平均水平的产品品质和服务体验
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
选址于<span className="font-semibold">写字楼商圈、高端社区</span>
|
||||
周边,覆盖核心目标客户群体
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 border border-blue-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">竞争策略</h3>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">产品差异化:</span>
|
||||
三大核心特点建立竞争壁垒
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">服务差异化:</span>
|
||||
提供营养咨询和个性化定制
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">体验差异化:</span>
|
||||
打造健康生活方式社区
|
||||
</p>
|
||||
<p className="leading-relaxed">
|
||||
<span className="font-semibold text-blue-600">品牌差异化:</span>
|
||||
建立信任和情感连接
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default BrandPositioningSection
|
||||
@@ -1,331 +0,0 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { DollarSign, TrendingUp, PieChart, Calculator } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const FinancialPlanningSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.finance-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.finance-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.finance-card', {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.finance-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const initialInvestment = [
|
||||
{
|
||||
category: '装修费用',
|
||||
amount: '20-30万元',
|
||||
items: ['设计费2万', '硬装15万', '软装5万', '招牌灯箱3万'],
|
||||
color: 'blue',
|
||||
icon: PieChart,
|
||||
},
|
||||
{
|
||||
category: '设备采购',
|
||||
amount: '10-15万元',
|
||||
items: ['厨房设备8万', '冷藏设备3万', '收银系统1万', '其他设备3万'],
|
||||
color: 'green',
|
||||
icon: Calculator,
|
||||
},
|
||||
{
|
||||
category: '前期物料',
|
||||
amount: '5-8万元',
|
||||
items: ['首批食材3万', '餐具包材2万', '清洁用品1万', '营销物料2万'],
|
||||
color: 'purple',
|
||||
icon: DollarSign,
|
||||
},
|
||||
{
|
||||
category: '其他费用',
|
||||
amount: '5-7万元',
|
||||
items: ['房租押金3万', '营业执照1万', '员工培训1万', '备用金2万'],
|
||||
color: 'orange',
|
||||
icon: TrendingUp,
|
||||
},
|
||||
]
|
||||
|
||||
const monthlyOperating = [
|
||||
{ item: '房租', amount: '1.5-2.5万元', percentage: 30 },
|
||||
{ item: '人力成本', amount: '3.5-4.5万元', percentage: 35 },
|
||||
{ item: '食材成本', amount: '2-3万元', percentage: 20 },
|
||||
{ item: '水电煤气', amount: '0.3-0.5万元', percentage: 3 },
|
||||
{ item: '营销推广', amount: '0.5-1万元', percentage: 5 },
|
||||
{ item: '其他费用', amount: '0.5-1万元', percentage: 7 },
|
||||
]
|
||||
|
||||
const revenueProjection = [
|
||||
{
|
||||
scenario: '保守预期',
|
||||
dailySales: 40,
|
||||
avgPrice: 45,
|
||||
dailyRevenue: 1800,
|
||||
monthlyRevenue: 54000,
|
||||
netProfit: 10800,
|
||||
profitMargin: '20%',
|
||||
},
|
||||
{
|
||||
scenario: '正常预期',
|
||||
dailySales: 60,
|
||||
avgPrice: 48,
|
||||
dailyRevenue: 2880,
|
||||
monthlyRevenue: 86400,
|
||||
netProfit: 25920,
|
||||
profitMargin: '30%',
|
||||
},
|
||||
{
|
||||
scenario: '乐观预期',
|
||||
dailySales: 80,
|
||||
avgPrice: 50,
|
||||
dailyRevenue: 4000,
|
||||
monthlyRevenue: 120000,
|
||||
netProfit: 48000,
|
||||
profitMargin: '40%',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="finance"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="finance-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">6️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第六阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
财务规划与投资回报
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
总投资40-60万元,预计8-12个月回本,首年净利润58万元
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 初期投资 */}
|
||||
<div className="mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">初期投资明细</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
{initialInvestment.map((investment, index) => {
|
||||
const Icon = investment.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="finance-card bg-white rounded-3xl p-6 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div
|
||||
className={`w-12 h-12 rounded-xl bg-${investment.color}-100
|
||||
flex items-center justify-center mb-4`}
|
||||
>
|
||||
<Icon className={`w-6 h-6 text-${investment.color}-600`} />
|
||||
</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-2">{investment.category}</h4>
|
||||
<div className="text-2xl font-bold text-primary-600 mb-4">{investment.amount}</div>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
{investment.items.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-primary-500">•</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<div className="mt-8 text-center">
|
||||
<div className="inline-block bg-gradient-to-r from-primary-500 to-primary-700 text-white rounded-2xl px-8 py-4">
|
||||
<div className="text-sm mb-1">总投资预算</div>
|
||||
<div className="text-4xl font-bold">40-60万元</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 月度运营成本 */}
|
||||
<div className="finance-card bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">月度运营成本</h3>
|
||||
<div className="space-y-4 max-w-4xl mx-auto">
|
||||
{monthlyOperating.map((item, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex-shrink-0 w-32">
|
||||
<span className="text-lg font-semibold text-gray-900">{item.item}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="relative h-10 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-500 to-primary-600
|
||||
rounded-lg transition-all duration-1000 ease-out"
|
||||
style={{ width: `${item.percentage}%` }}
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 w-32 text-right">
|
||||
<span className="text-lg font-semibold text-primary-600">{item.amount}</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="mt-8 pt-8 border-t border-gray-200 text-center">
|
||||
<div className="text-lg text-gray-600 mb-2">月度总运营成本</div>
|
||||
<div className="text-3xl font-bold text-gray-900">8-12万元</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 营收预测 */}
|
||||
<div className="mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">营收与利润预测</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
{revenueProjection.map((projection, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className={`finance-card rounded-3xl p-8 shadow-xl border-2
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2
|
||||
${
|
||||
index === 1
|
||||
? 'bg-gradient-to-br from-primary-500 to-primary-700 text-white border-primary-600 scale-105'
|
||||
: 'bg-white border-gray-100'
|
||||
}`}
|
||||
>
|
||||
<div className="text-center mb-6">
|
||||
<h4
|
||||
className={`text-2xl font-bold mb-2 ${index === 1 ? 'text-white' : 'text-gray-900'}`}
|
||||
>
|
||||
{projection.scenario}
|
||||
</h4>
|
||||
{index === 1 && (
|
||||
<span className="inline-block px-3 py-1 bg-white/20 rounded-full text-sm">
|
||||
推荐参考
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
日均单量
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
{projection.dailySales}单
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
客单价
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
¥{projection.avgPrice}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
日营业额
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
¥{projection.dailyRevenue}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
月营业额
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-gray-900'}`}>
|
||||
¥{projection.monthlyRevenue.toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex justify-between items-center pb-3 border-b border-gray-200/20">
|
||||
<span className={index === 1 ? 'text-white/80' : 'text-gray-600'}>
|
||||
净利润率
|
||||
</span>
|
||||
<span className={`text-xl font-bold ${index === 1 ? 'text-white' : 'text-primary-600'}`}>
|
||||
{projection.profitMargin}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div
|
||||
className={`text-center pt-4 ${index === 1 ? 'bg-white/10' : 'bg-primary-50'}
|
||||
rounded-xl p-4 mt-4`}
|
||||
>
|
||||
<div className={`text-sm mb-1 ${index === 1 ? 'text-white/80' : 'text-gray-600'}`}>
|
||||
月净利润
|
||||
</div>
|
||||
<div className={`text-3xl font-bold ${index === 1 ? 'text-white' : 'text-primary-600'}`}>
|
||||
¥{projection.netProfit.toLocaleString()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 投资回报分析 */}
|
||||
<div className="bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">投资回报分析</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8 max-w-5xl mx-auto">
|
||||
<div className="text-center p-6 bg-white/10 rounded-2xl backdrop-blur-sm">
|
||||
<div className="text-5xl mb-4">📅</div>
|
||||
<div className="text-sm text-white/80 mb-2">回本周期</div>
|
||||
<div className="text-3xl font-bold">8-12个月</div>
|
||||
</div>
|
||||
<div className="text-center p-6 bg-white/10 rounded-2xl backdrop-blur-sm">
|
||||
<div className="text-5xl mb-4">💰</div>
|
||||
<div className="text-sm text-white/80 mb-2">首年净利润</div>
|
||||
<div className="text-3xl font-bold">58万元</div>
|
||||
</div>
|
||||
<div className="text-center p-6 bg-white/10 rounded-2xl backdrop-blur-sm">
|
||||
<div className="text-5xl mb-4">📈</div>
|
||||
<div className="text-sm text-white/80 mb-2">年投资回报率</div>
|
||||
<div className="text-3xl font-bold">116%</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-white/20 text-center max-w-4xl mx-auto">
|
||||
<p className="text-lg text-white/90 leading-relaxed">
|
||||
基于正常经营预期,首年可实现营业额
|
||||
<span className="font-bold text-2xl mx-2">103.7万元</span>
|
||||
,净利润率
|
||||
<span className="font-bold text-2xl mx-2">30%</span>
|
||||
,净利润
|
||||
<span className="font-bold text-2xl mx-2">58万元</span>
|
||||
。第二年随着品牌知名度提升和客户积累,利润将持续增长。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default FinancialPlanningSection
|
||||
@@ -1,257 +0,0 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { MapPin, Store, Palette, Users } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const LocationDesignSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.location-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.location-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.location-card', {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2,
|
||||
scrollTrigger: {
|
||||
trigger: '.location-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const locationCriteria = [
|
||||
{
|
||||
icon: MapPin,
|
||||
title: '核心商圈',
|
||||
description: '写字楼、高端社区周边',
|
||||
requirements: [
|
||||
'日均人流量 > 5000人',
|
||||
'白领占比 > 60%',
|
||||
'周边500米内办公人群 > 2000人',
|
||||
'可见性好,易于到达',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Store,
|
||||
title: '店铺规格',
|
||||
description: '面积60-120㎡',
|
||||
requirements: [
|
||||
'实际使用面积 80-100㎡',
|
||||
'层高 > 3米',
|
||||
'门面宽度 > 6米',
|
||||
'具备上下水、排烟条件',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Palette,
|
||||
title: '装修风格',
|
||||
description: '简约现代,自然清新',
|
||||
requirements: [
|
||||
'浅色系为主基调',
|
||||
'原木元素点缀',
|
||||
'充足自然采光',
|
||||
'绿植景观设计',
|
||||
],
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
title: '功能分区',
|
||||
description: '合理布局,提升效率',
|
||||
requirements: [
|
||||
'开放式厨房占比30%',
|
||||
'用餐区占比50%',
|
||||
'收银接待区占比10%',
|
||||
'储物备餐区占比10%',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const designElements = [
|
||||
{
|
||||
title: '色彩方案',
|
||||
items: ['主色: 浅青色/绿色', '辅色: 米白色', '点缀色: 原木色'],
|
||||
emoji: '🎨',
|
||||
},
|
||||
{
|
||||
title: '材质选择',
|
||||
items: ['原木桌椅', '大理石台面', '绿植墙面', '玻璃隔断'],
|
||||
emoji: '🪵',
|
||||
},
|
||||
{
|
||||
title: '照明设计',
|
||||
items: ['自然光为主', '暖光LED', '重点照明', '氛围灯光'],
|
||||
emoji: '💡',
|
||||
},
|
||||
{
|
||||
title: '软装配饰',
|
||||
items: ['北欧风家具', '艺术挂画', '绿色植物', '舒适座椅'],
|
||||
emoji: '🛋️',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="location"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-gray-50 to-white"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="location-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">4️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第四阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
选址与店铺设计
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
精选核心商圈,打造简约自然的用餐环境,提供舒适愉悦的消费体验
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 选址与设计标准 */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{locationCriteria.map((criterion, index) => {
|
||||
const Icon = criterion.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="location-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div className="w-14 h-14 rounded-xl bg-primary-100 flex items-center justify-center flex-shrink-0">
|
||||
<Icon className="w-7 h-7 text-primary-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">{criterion.title}</h3>
|
||||
<p className="text-gray-600">{criterion.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{criterion.requirements.map((req, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-start gap-3 p-3 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="w-1.5 h-1.5 bg-primary-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span className="text-gray-700">{req}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 设计元素 */}
|
||||
<div className="bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-12">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">设计元素</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{designElements.map((element, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="location-card text-center p-6 rounded-2xl hover:bg-primary-50
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-5xl mb-4">{element.emoji}</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-4">{element.title}</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600">
|
||||
{element.items.map((item, idx) => (
|
||||
<li key={idx}>{item}</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 空间布局示意 */}
|
||||
<div className="bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">店铺空间布局</h3>
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div>
|
||||
<h4 className="text-2xl font-semibold mb-4">前厅区域 (70%)</h4>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🍽️</span>
|
||||
<div>
|
||||
<div className="font-medium">用餐区</div>
|
||||
<div className="text-white/80 text-sm">30-40个座位,多种座位类型</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🔍</span>
|
||||
<div>
|
||||
<div className="font-medium">开放式厨房</div>
|
||||
<div className="text-white/80 text-sm">透明化制作,增强信任感</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">💳</span>
|
||||
<div>
|
||||
<div className="font-medium">收银接待区</div>
|
||||
<div className="text-white/80 text-sm">点餐、取餐、咨询一体化</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-2xl font-semibold mb-4">后厨区域 (30%)</h4>
|
||||
<ul className="space-y-3">
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🥗</span>
|
||||
<div>
|
||||
<div className="font-medium">食材准备区</div>
|
||||
<div className="text-white/80 text-sm">清洗、切配、腌制</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">🔥</span>
|
||||
<div>
|
||||
<div className="font-medium">烹饪操作区</div>
|
||||
<div className="text-white/80 text-sm">煎、烤、蒸、煮</div>
|
||||
</div>
|
||||
</li>
|
||||
<li className="flex items-start gap-2">
|
||||
<span className="text-2xl">❄️</span>
|
||||
<div>
|
||||
<div className="font-medium">冷藏储存区</div>
|
||||
<div className="text-white/80 text-sm">冷柜、冷库、干货区</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-white/20 text-center">
|
||||
<p className="text-lg text-white/90">
|
||||
总投资预算: <span className="text-2xl font-bold">35-50万元</span>
|
||||
(含装修、设备、前期物料)
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default LocationDesignSection
|
||||
@@ -1,241 +0,0 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { TrendingUp, Users, DollarSign, Target } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const MarketResearchSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
// 标题动画
|
||||
gsap.from('.market-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.market-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
// 统计卡片动画
|
||||
gsap.from('.stat-card', {
|
||||
y: 30,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.stat-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
|
||||
// 趋势图动画
|
||||
gsap.from('.trend-item', {
|
||||
x: -50,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.1,
|
||||
scrollTrigger: {
|
||||
trigger: '.trend-item',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const marketStats = [
|
||||
{
|
||||
icon: DollarSign,
|
||||
value: '1200亿元',
|
||||
label: '2024年市场规模',
|
||||
color: 'text-green-500',
|
||||
bgColor: 'bg-green-50',
|
||||
},
|
||||
{
|
||||
icon: TrendingUp,
|
||||
value: '18%',
|
||||
label: '年复合增长率',
|
||||
color: 'text-blue-500',
|
||||
bgColor: 'bg-blue-50',
|
||||
},
|
||||
{
|
||||
icon: Users,
|
||||
value: '3.5亿',
|
||||
label: '目标用户群体',
|
||||
color: 'text-purple-500',
|
||||
bgColor: 'bg-purple-50',
|
||||
},
|
||||
{
|
||||
icon: Target,
|
||||
value: '65%',
|
||||
label: '白领女性占比',
|
||||
color: 'text-pink-500',
|
||||
bgColor: 'bg-pink-50',
|
||||
},
|
||||
]
|
||||
|
||||
const trends = [
|
||||
{ year: '2023年', value: '1020亿', growth: '+15%' },
|
||||
{ year: '2024年', value: '1200亿', growth: '+18%' },
|
||||
{ year: '2025年(预测)', value: '1416亿', growth: '+18%' },
|
||||
{ year: '2026年(预测)', value: '1671亿', growth: '+18%' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="market"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-gray-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="market-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">1️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第一阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
市场调研与分析
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
深入分析轻食市场现状,精准定位目标客户群体,把握行业发展趋势
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 市场统计卡片 */}
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{marketStats.map((stat, index) => {
|
||||
const Icon = stat.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="stat-card bg-white rounded-2xl p-6 shadow-lg hover:shadow-xl
|
||||
transition-all duration-300 transform hover:-translate-y-2
|
||||
border border-gray-100"
|
||||
>
|
||||
<div className={`${stat.bgColor} w-14 h-14 rounded-xl flex items-center justify-center mb-4`}>
|
||||
<Icon className={`w-7 h-7 ${stat.color}`} />
|
||||
</div>
|
||||
<div className="text-3xl font-bold text-gray-900 mb-2">{stat.value}</div>
|
||||
<div className="text-gray-600">{stat.label}</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 市场趋势 */}
|
||||
<div className="bg-white rounded-3xl p-8 shadow-xl border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-8">市场规模增长趋势</h3>
|
||||
<div className="space-y-4">
|
||||
{trends.map((trend, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="trend-item flex items-center gap-6 p-4 rounded-xl hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="flex-shrink-0 w-40">
|
||||
<span className="text-lg font-semibold text-gray-900">{trend.year}</span>
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="relative h-12 bg-gray-100 rounded-lg overflow-hidden">
|
||||
<div
|
||||
className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-500 to-primary-600
|
||||
rounded-lg transition-all duration-1000 ease-out flex items-center justify-end pr-4"
|
||||
style={{ width: `${(index + 1) * 20}%` }}
|
||||
>
|
||||
<span className="text-white font-bold">{trend.value}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-shrink-0 w-20 text-right">
|
||||
<span className="inline-flex items-center px-3 py-1 bg-green-100 text-green-700
|
||||
rounded-full text-sm font-medium">
|
||||
{trend.growth}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 目标客户群体 */}
|
||||
<div className="mt-12 grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-gradient-to-br from-primary-50 to-white rounded-3xl p-8 border border-primary-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">核心客户画像</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">年龄段</div>
|
||||
<div className="text-gray-600">25-45岁中高端白领群体</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">收入水平</div>
|
||||
<div className="text-gray-600">月收入8000元以上</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">消费特点</div>
|
||||
<div className="text-gray-600">注重健康、品质和效率</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">用餐场景</div>
|
||||
<div className="text-gray-600">工作日午餐、健身后轻食</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 border border-blue-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">市场机会分析</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">健康意识提升</div>
|
||||
<div className="text-gray-600">消费者对健康饮食需求持续增长</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">差异化空间大</div>
|
||||
<div className="text-gray-600">市场同质化严重,创新品牌有优势</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">政策支持</div>
|
||||
<div className="text-gray-600">健康中国战略推动行业发展</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="w-2 h-2 bg-blue-500 rounded-full mt-2"></div>
|
||||
<div>
|
||||
<div className="font-semibold text-gray-900">消费升级</div>
|
||||
<div className="text-gray-600">愿意为品质和服务支付溢价</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarketResearchSection
|
||||
@@ -1,345 +0,0 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { Smartphone, Users, Share2, Gift, Star, MessageCircle } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const MarketingSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.marketing-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.marketing-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.marketing-card', {
|
||||
scale: 0.95,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.marketing-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const marketingStrategies = [
|
||||
{
|
||||
title: '线上推广',
|
||||
icon: Smartphone,
|
||||
color: 'blue',
|
||||
tactics: [
|
||||
{
|
||||
name: '小程序商城',
|
||||
description: '自有小程序,在线点餐、会员管理',
|
||||
budget: '2万元',
|
||||
},
|
||||
{
|
||||
name: '抖音/小红书',
|
||||
description: '短视频营销,探店打卡种草',
|
||||
budget: '1万元/月',
|
||||
},
|
||||
{
|
||||
name: '美团/饿了么',
|
||||
description: '外卖平台入驻,扩大覆盖范围',
|
||||
budget: '佣金20%',
|
||||
},
|
||||
{
|
||||
name: 'SEO优化',
|
||||
description: '搜索引擎优化,提升品牌曝光',
|
||||
budget: '5000元/月',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '线下推广',
|
||||
icon: Users,
|
||||
color: 'green',
|
||||
tactics: [
|
||||
{
|
||||
name: '开业活动',
|
||||
description: '前100名5折优惠,吸引首批客户',
|
||||
budget: '1万元',
|
||||
},
|
||||
{
|
||||
name: '地推宣传',
|
||||
description: '周边写字楼发放优惠券',
|
||||
budget: '5000元',
|
||||
},
|
||||
{
|
||||
name: '异业合作',
|
||||
description: '与健身房、瑜伽馆等合作',
|
||||
budget: '3000元',
|
||||
},
|
||||
{
|
||||
name: '试吃活动',
|
||||
description: '定期举办新品试吃活动',
|
||||
budget: '2000元/月',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '会员体系',
|
||||
icon: Gift,
|
||||
color: 'purple',
|
||||
tactics: [
|
||||
{
|
||||
name: '充值优惠',
|
||||
description: '充500送50,充1000送150',
|
||||
budget: '让利10-15%',
|
||||
},
|
||||
{
|
||||
name: '积分系统',
|
||||
description: '消费1元积1分,积分兑换礼品',
|
||||
budget: '5000元/月',
|
||||
},
|
||||
{
|
||||
name: '生日特权',
|
||||
description: '生日当月享受8折优惠',
|
||||
budget: '3000元/月',
|
||||
},
|
||||
{
|
||||
name: '会员专享',
|
||||
description: '新品优先体验、专属活动',
|
||||
budget: '2000元/月',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: '口碑营销',
|
||||
icon: Share2,
|
||||
color: 'pink',
|
||||
tactics: [
|
||||
{
|
||||
name: '分享有礼',
|
||||
description: '分享朋友圈集赞送饮品',
|
||||
budget: '5000元/月',
|
||||
},
|
||||
{
|
||||
name: '拼团活动',
|
||||
description: '3人拼团享8折优惠',
|
||||
budget: '8折让利',
|
||||
},
|
||||
{
|
||||
name: '推荐返现',
|
||||
description: '老客户推荐新客户各得10元',
|
||||
budget: '3000元/月',
|
||||
},
|
||||
{
|
||||
name: 'UGC内容',
|
||||
description: '鼓励顾客发布用餐照片',
|
||||
budget: '礼品成本',
|
||||
},
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const marketingTimeline = [
|
||||
{
|
||||
phase: '开业前1个月',
|
||||
actions: ['小程序开发上线', '社交媒体账号注册', '周边地推宣传', '异业合作洽谈'],
|
||||
icon: '🎯',
|
||||
},
|
||||
{
|
||||
phase: '开业首月',
|
||||
actions: ['开业大促活动', '会员系统推广', '抖音探店合作', '外卖平台入驻'],
|
||||
icon: '🚀',
|
||||
},
|
||||
{
|
||||
phase: '第2-3个月',
|
||||
actions: ['会员活动运营', '定期试吃活动', '短视频持续输出', '口碑营销推进'],
|
||||
icon: '📈',
|
||||
},
|
||||
{
|
||||
phase: '稳定运营期',
|
||||
actions: ['会员精细化运营', 'KOL合作推广', '季节性新品营销', '社区活动参与'],
|
||||
icon: '⭐',
|
||||
},
|
||||
]
|
||||
|
||||
const kpiTargets = [
|
||||
{ metric: '首月获客', target: '500+', icon: '👥' },
|
||||
{ metric: '会员转化率', target: '40%', icon: '💳' },
|
||||
{ metric: '复购率', target: '60%', icon: '🔄' },
|
||||
{ metric: '线上订单占比', target: '30%', icon: '📱' },
|
||||
{ metric: '客户满意度', target: '4.5分', icon: '⭐' },
|
||||
{ metric: '月营销成本', target: '<2万', icon: '💰' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="marketing"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-primary-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="marketing-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">7️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第七阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
营销推广策略
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
线上线下结合,会员体系驱动,口碑传播为核心的全方位营销策略
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 营销策略 */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{marketingStrategies.map((strategy, index) => {
|
||||
const Icon = strategy.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="marketing-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-${strategy.color}-100
|
||||
flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<Icon className={`w-7 h-7 text-${strategy.color}-600`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900">{strategy.title}</h3>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
{strategy.tactics.map((tactic, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="p-4 rounded-xl border border-gray-100 hover:border-primary-300
|
||||
hover:bg-primary-50 transition-all duration-300"
|
||||
>
|
||||
<div className="flex justify-between items-start mb-2">
|
||||
<h4 className="font-semibold text-gray-900">{tactic.name}</h4>
|
||||
<span className="text-sm text-primary-600 font-medium whitespace-nowrap ml-2">
|
||||
{tactic.budget}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600">{tactic.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 营销时间线 */}
|
||||
<div className="marketing-card bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-16">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">营销时间规划</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{marketingTimeline.map((timeline, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="marketing-card text-center p-6 rounded-2xl border-2 border-gray-100
|
||||
hover:border-primary-300 hover:bg-primary-50
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-5xl mb-4">{timeline.icon}</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-4">{timeline.phase}</h4>
|
||||
<ul className="space-y-2 text-sm text-gray-600 text-left">
|
||||
{timeline.actions.map((action, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-primary-500 mt-1">•</span>
|
||||
<span>{action}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* KPI目标 */}
|
||||
<div className="marketing-card bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white mb-16">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">营销KPI目标</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{kpiTargets.map((kpi, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="marketing-card text-center p-6 rounded-2xl bg-white/10 backdrop-blur-sm
|
||||
hover:bg-white/20 transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-4xl mb-3">{kpi.icon}</div>
|
||||
<div className="text-sm text-white/80 mb-2">{kpi.metric}</div>
|
||||
<div className="text-2xl font-bold">{kpi.target}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 营销预算总结 */}
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
<div className="bg-white rounded-3xl p-8 shadow-xl border border-gray-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">营销预算分配</h3>
|
||||
<div className="space-y-4">
|
||||
<div className="flex justify-between items-center p-4 bg-gray-50 rounded-xl">
|
||||
<span className="font-medium text-gray-700">开业前期投入</span>
|
||||
<span className="text-xl font-bold text-primary-600">3-5万元</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-4 bg-gray-50 rounded-xl">
|
||||
<span className="font-medium text-gray-700">月度营销费用</span>
|
||||
<span className="text-xl font-bold text-primary-600">1.5-2万元</span>
|
||||
</div>
|
||||
<div className="flex justify-between items-center p-4 bg-gray-50 rounded-xl">
|
||||
<span className="font-medium text-gray-700">营销费用占比</span>
|
||||
<span className="text-xl font-bold text-primary-600">15-20%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-gradient-to-br from-blue-50 to-white rounded-3xl p-8 border border-blue-100">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-6">预期营销效果</h3>
|
||||
<div className="space-y-4 text-gray-700">
|
||||
<p className="flex items-start gap-2">
|
||||
<Star className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>品牌认知:</strong> 3个月内成为区域知名轻食品牌
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-start gap-2">
|
||||
<MessageCircle className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>客户积累:</strong> 首年积累2000+会员客户
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-start gap-2">
|
||||
<Share2 className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>口碑传播:</strong> 60%新客户来自老客户推荐
|
||||
</span>
|
||||
</p>
|
||||
<p className="flex items-start gap-2">
|
||||
<Users className="w-5 h-5 text-blue-500 flex-shrink-0 mt-1" />
|
||||
<span>
|
||||
<strong>复购率:</strong> 保持60%以上的高复购率
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default MarketingSection
|
||||
@@ -1,240 +0,0 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { Utensils, Leaf, Flame, Clock } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const ProductDevelopmentSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.product-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.product-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.product-card', {
|
||||
y: 40,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.product-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const productCategories = [
|
||||
{
|
||||
name: '能量碗系列',
|
||||
description: '高蛋白低脂,适合健身人群',
|
||||
icon: Flame,
|
||||
color: 'orange',
|
||||
products: [
|
||||
'青莳香煎牛肉能量碗',
|
||||
'烤鸡胸蔬菜能量碗',
|
||||
'三文鱼牛油果能量碗',
|
||||
'藜麦虾仁能量碗',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '轻食沙拉系列',
|
||||
description: '清爽低卡,膳食纤维丰富',
|
||||
icon: Leaf,
|
||||
color: 'green',
|
||||
products: [
|
||||
'青莳虾仁牛油果沙拉',
|
||||
'烟熏三文鱼沙拉',
|
||||
'鸡胸凯撒沙拉',
|
||||
'田园蔬菜沙拉',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '冷意面系列',
|
||||
description: '夏日清凉,口感丰富',
|
||||
icon: Utensils,
|
||||
color: 'blue',
|
||||
products: [
|
||||
'青莳夏季芒果鸡胸冷意面',
|
||||
'番茄海鲜冷意面',
|
||||
'青酱鸡肉冷意面',
|
||||
'日式和风冷意面',
|
||||
],
|
||||
},
|
||||
{
|
||||
name: '定制套餐',
|
||||
description: '个性化营养方案',
|
||||
icon: Clock,
|
||||
color: 'purple',
|
||||
products: [
|
||||
'青莳减脂专属套餐',
|
||||
'增肌健身套餐',
|
||||
'办公室白领套餐',
|
||||
'孕期营养套餐',
|
||||
],
|
||||
},
|
||||
]
|
||||
|
||||
const nutritionFeatures = [
|
||||
{
|
||||
title: '精准热量控制',
|
||||
desc: '每份餐品热量控制在400-600卡路里',
|
||||
value: '400-600',
|
||||
unit: 'kcal',
|
||||
},
|
||||
{
|
||||
title: '高蛋白配比',
|
||||
desc: '蛋白质含量占比25-35%',
|
||||
value: '25-35',
|
||||
unit: '%',
|
||||
},
|
||||
{
|
||||
title: '低GI食材',
|
||||
desc: '血糖指数控制在55以下',
|
||||
value: '<55',
|
||||
unit: 'GI',
|
||||
},
|
||||
{
|
||||
title: '膳食纤维',
|
||||
desc: '每份含8-12g膳食纤维',
|
||||
value: '8-12',
|
||||
unit: 'g',
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="product"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-primary-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="product-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">3️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第三阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
产品开发与菜单设计
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
32款精心研发的轻食产品,科学营养配比,满足不同需求
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 营养特点 */}
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6 mb-16">
|
||||
{nutritionFeatures.map((feature, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="product-card bg-white rounded-2xl p-6 shadow-lg text-center
|
||||
hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1"
|
||||
>
|
||||
<div className="text-4xl font-bold text-primary-600 mb-2">
|
||||
{feature.value}
|
||||
<span className="text-xl ml-1">{feature.unit}</span>
|
||||
</div>
|
||||
<div className="font-semibold text-gray-900 mb-2">{feature.title}</div>
|
||||
<div className="text-sm text-gray-600">{feature.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
{/* 产品系列 */}
|
||||
<div className="grid md:grid-cols-2 gap-8">
|
||||
{productCategories.map((category, index) => {
|
||||
const Icon = category.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="product-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className={`w-14 h-14 rounded-xl bg-${category.color}-100
|
||||
flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<Icon className={`w-7 h-7 text-${category.color}-600`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<h3 className="text-2xl font-bold text-gray-900 mb-2">{category.name}</h3>
|
||||
<p className="text-gray-600">{category.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
{category.products.map((product, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-center gap-3 p-3 rounded-lg hover:bg-gray-50
|
||||
transition-colors group cursor-pointer"
|
||||
>
|
||||
<div className="w-2 h-2 bg-primary-500 rounded-full group-hover:scale-125 transition-transform"></div>
|
||||
<span className="text-gray-700 group-hover:text-primary-600 transition-colors">
|
||||
{product}
|
||||
</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-6 border-t border-gray-100">
|
||||
<button
|
||||
className="w-full py-3 bg-gradient-to-r from-primary-500 to-primary-600
|
||||
text-white rounded-xl font-medium
|
||||
hover:from-primary-600 hover:to-primary-700
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
查看详细菜单
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 产品开发理念 */}
|
||||
<div className="mt-12 bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">产品研发理念</h3>
|
||||
<div className="grid md:grid-cols-3 gap-8">
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-4">🔬</div>
|
||||
<div className="text-xl font-semibold mb-3">科学配方</div>
|
||||
<div className="text-white/90">
|
||||
营养师团队精心设计,确保每份餐品营养均衡
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-4">👨🍳</div>
|
||||
<div className="text-xl font-semibold mb-3">匠心制作</div>
|
||||
<div className="text-white/90">
|
||||
资深厨师团队,精选食材,严格把控每道工序
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<div className="text-5xl mb-4">💚</div>
|
||||
<div className="text-xl font-semibold mb-3">持续创新</div>
|
||||
<div className="text-white/90">
|
||||
每季度推出新品,紧跟健康饮食趋势
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default ProductDevelopmentSection
|
||||
@@ -1,279 +0,0 @@
|
||||
import { useEffect, useRef } from 'react'
|
||||
import { gsap } from 'gsap'
|
||||
import { ScrollTrigger } from 'gsap/ScrollTrigger'
|
||||
import { ChefHat, GraduationCap, Heart, Trophy } from 'lucide-react'
|
||||
|
||||
gsap.registerPlugin(ScrollTrigger)
|
||||
|
||||
const TeamBuildingSection = () => {
|
||||
const sectionRef = useRef<HTMLElement>(null)
|
||||
|
||||
useEffect(() => {
|
||||
const ctx = gsap.context(() => {
|
||||
gsap.from('.team-title', {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: '.team-title',
|
||||
start: 'top 80%',
|
||||
},
|
||||
})
|
||||
|
||||
gsap.from('.team-card', {
|
||||
scale: 0.95,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.15,
|
||||
scrollTrigger: {
|
||||
trigger: '.team-card',
|
||||
start: 'top 85%',
|
||||
},
|
||||
})
|
||||
}, sectionRef)
|
||||
|
||||
return () => ctx.revert()
|
||||
}, [])
|
||||
|
||||
const teamStructure = [
|
||||
{
|
||||
role: '店长',
|
||||
count: 1,
|
||||
icon: Trophy,
|
||||
color: 'purple',
|
||||
responsibilities: [
|
||||
'整体运营管理',
|
||||
'人员调度安排',
|
||||
'客户关系维护',
|
||||
'业绩目标达成',
|
||||
],
|
||||
requirements: '3年以上餐饮管理经验',
|
||||
salary: '8000-12000元/月',
|
||||
},
|
||||
{
|
||||
role: '厨师长',
|
||||
count: 1,
|
||||
icon: ChefHat,
|
||||
color: 'orange',
|
||||
responsibilities: [
|
||||
'菜品研发创新',
|
||||
'食材质量把控',
|
||||
'厨房团队管理',
|
||||
'出品标准监督',
|
||||
],
|
||||
requirements: '5年以上轻食/西餐经验',
|
||||
salary: '7000-10000元/月',
|
||||
},
|
||||
{
|
||||
role: '厨师',
|
||||
count: 2,
|
||||
icon: ChefHat,
|
||||
color: 'green',
|
||||
responsibilities: [
|
||||
'菜品制作加工',
|
||||
'食材准备处理',
|
||||
'厨房卫生维护',
|
||||
'协助菜品研发',
|
||||
],
|
||||
requirements: '2年以上厨房工作经验',
|
||||
salary: '5000-7000元/月',
|
||||
},
|
||||
{
|
||||
role: '服务员',
|
||||
count: 3,
|
||||
icon: Heart,
|
||||
color: 'pink',
|
||||
responsibilities: [
|
||||
'顾客接待服务',
|
||||
'点餐收银操作',
|
||||
'餐厅清洁维护',
|
||||
'客户反馈收集',
|
||||
],
|
||||
requirements: '良好服务意识和沟通能力',
|
||||
salary: '4000-6000元/月',
|
||||
},
|
||||
]
|
||||
|
||||
const trainingPrograms = [
|
||||
{
|
||||
title: '产品知识培训',
|
||||
duration: '3天',
|
||||
content: [
|
||||
'菜品原料和制作工艺',
|
||||
'营养成分和健康价值',
|
||||
'食材溯源系统使用',
|
||||
'产品推荐技巧',
|
||||
],
|
||||
emoji: '📚',
|
||||
},
|
||||
{
|
||||
title: '服务标准培训',
|
||||
duration: '2天',
|
||||
content: [
|
||||
'服务流程和话术',
|
||||
'顾客投诉处理',
|
||||
'收银系统操作',
|
||||
'卫生安全规范',
|
||||
],
|
||||
emoji: '🎯',
|
||||
},
|
||||
{
|
||||
title: '品牌文化培训',
|
||||
duration: '1天',
|
||||
content: [
|
||||
'品牌理念和价值观',
|
||||
'企业文化认同',
|
||||
'团队协作精神',
|
||||
'职业发展规划',
|
||||
],
|
||||
emoji: '💚',
|
||||
},
|
||||
{
|
||||
title: '持续培训机制',
|
||||
duration: '长期',
|
||||
content: [
|
||||
'每月新品培训',
|
||||
'季度技能考核',
|
||||
'优秀员工分享',
|
||||
'外部学习交流',
|
||||
],
|
||||
emoji: '🔄',
|
||||
},
|
||||
]
|
||||
|
||||
const incentiveSystem = [
|
||||
{ icon: '💰', title: '绩效奖金', desc: '月度/季度销售达成奖励' },
|
||||
{ icon: '🏆', title: '晋升机制', desc: '明确的职业发展通道' },
|
||||
{ icon: '🎓', title: '培训机会', desc: '提供专业技能提升培训' },
|
||||
{ icon: '🎁', title: '福利待遇', desc: '五险一金、带薪年假、节日福利' },
|
||||
{ icon: '🌟', title: '员工关怀', desc: '生日礼物、员工活动、困难帮扶' },
|
||||
{ icon: '👥', title: '团队建设', desc: '定期团建活动增强凝聚力' },
|
||||
]
|
||||
|
||||
return (
|
||||
<section
|
||||
id="team"
|
||||
ref={sectionRef}
|
||||
className="section py-24 px-4 bg-gradient-to-br from-white to-gray-50"
|
||||
>
|
||||
<div className="max-w-7xl mx-auto">
|
||||
{/* 标题 */}
|
||||
<div className="team-title text-center mb-16">
|
||||
<div className="inline-flex items-center gap-2 px-4 py-2 bg-primary-100 rounded-full mb-4">
|
||||
<span className="text-2xl">5️⃣</span>
|
||||
<span className="text-primary-700 font-medium">第五阶段</span>
|
||||
</div>
|
||||
<h2 className="text-4xl lg:text-5xl font-bold text-gray-900 mb-4">
|
||||
团队建设与培训
|
||||
</h2>
|
||||
<p className="text-xl text-gray-600 max-w-3xl mx-auto">
|
||||
7人精干团队,完善的培训体系,打造专业高效的服务团队
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* 团队架构 */}
|
||||
<div className="grid md:grid-cols-2 gap-8 mb-16">
|
||||
{teamStructure.map((member, index) => {
|
||||
const Icon = member.icon
|
||||
return (
|
||||
<div
|
||||
key={index}
|
||||
className="team-card bg-white rounded-3xl p-8 shadow-xl border border-gray-100
|
||||
hover:shadow-2xl transition-all duration-500 transform hover:-translate-y-2"
|
||||
>
|
||||
<div className="flex items-start gap-4 mb-6">
|
||||
<div
|
||||
className={`w-16 h-16 rounded-2xl bg-${member.color}-100
|
||||
flex items-center justify-center flex-shrink-0`}
|
||||
>
|
||||
<Icon className={`w-8 h-8 text-${member.color}-600`} />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-3 mb-2">
|
||||
<h3 className="text-2xl font-bold text-gray-900">{member.role}</h3>
|
||||
<span className="px-3 py-1 bg-primary-100 text-primary-700 rounded-full text-sm font-medium">
|
||||
{member.count}人
|
||||
</span>
|
||||
</div>
|
||||
<div className="text-sm text-gray-600 mb-2">{member.requirements}</div>
|
||||
<div className="text-lg font-semibold text-primary-600">{member.salary}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="font-semibold text-gray-900 mb-3">岗位职责:</div>
|
||||
{member.responsibilities.map((resp, idx) => (
|
||||
<div
|
||||
key={idx}
|
||||
className="flex items-start gap-2 p-2 rounded-lg hover:bg-gray-50 transition-colors"
|
||||
>
|
||||
<div className="w-1.5 h-1.5 bg-primary-500 rounded-full mt-2 flex-shrink-0"></div>
|
||||
<span className="text-gray-700">{resp}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* 培训体系 */}
|
||||
<div className="bg-white rounded-3xl p-8 lg:p-12 shadow-xl border border-gray-100 mb-12">
|
||||
<h3 className="text-3xl font-bold text-gray-900 mb-8 text-center">培训体系</h3>
|
||||
<div className="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
||||
{trainingPrograms.map((program, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="team-card text-center p-6 rounded-2xl border-2 border-gray-100
|
||||
hover:border-primary-300 hover:bg-primary-50
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-5xl mb-4">{program.emoji}</div>
|
||||
<h4 className="text-xl font-bold text-gray-900 mb-2">{program.title}</h4>
|
||||
<div className="text-sm text-primary-600 font-medium mb-4">
|
||||
培训周期: {program.duration}
|
||||
</div>
|
||||
<ul className="space-y-2 text-sm text-gray-600 text-left">
|
||||
{program.content.map((item, idx) => (
|
||||
<li key={idx} className="flex items-start gap-2">
|
||||
<span className="text-primary-500">•</span>
|
||||
<span>{item}</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 激励机制 */}
|
||||
<div className="bg-gradient-to-br from-primary-500 to-primary-700 rounded-3xl p-12 text-white">
|
||||
<h3 className="text-3xl font-bold mb-8 text-center">激励与福利体系</h3>
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6">
|
||||
{incentiveSystem.map((incentive, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="team-card text-center p-4 rounded-2xl hover:bg-white/10
|
||||
transition-all duration-300 transform hover:scale-105"
|
||||
>
|
||||
<div className="text-4xl mb-3">{incentive.icon}</div>
|
||||
<div className="font-semibold mb-2">{incentive.title}</div>
|
||||
<div className="text-sm text-white/80">{incentive.desc}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 pt-8 border-t border-white/20">
|
||||
<div className="text-center">
|
||||
<div className="text-lg text-white/90 mb-2">总人力成本预算</div>
|
||||
<div className="text-4xl font-bold">3.5-4.5万元/月</div>
|
||||
<div className="text-sm text-white/80 mt-2">(含工资、社保、福利)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
)
|
||||
}
|
||||
|
||||
export default TeamBuildingSection
|
||||
@@ -1,68 +0,0 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
import { StrictMode } from 'react'
|
||||
import { createRoot } from 'react-dom/client'
|
||||
import './index.css'
|
||||
import App from './App.tsx'
|
||||
|
||||
createRoot(document.getElementById('root')!).render(
|
||||
<StrictMode>
|
||||
<App />
|
||||
</StrictMode>,
|
||||
)
|
||||
@@ -1,28 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"module": "ESNext",
|
||||
"types": ["vite/client"],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx",
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
||||
"target": "ES2023",
|
||||
"lib": ["ES2023"],
|
||||
"module": "ESNext",
|
||||
"types": [],
|
||||
"skipLibCheck": true,
|
||||
|
||||
/* Bundler mode */
|
||||
"moduleResolution": "bundler",
|
||||
"allowImportingTsExtensions": true,
|
||||
"verbatimModuleSyntax": true,
|
||||
"moduleDetection": "force",
|
||||
"noEmit": true,
|
||||
|
||||
/* Linting */
|
||||
"strict": true,
|
||||
"noUnusedLocals": true,
|
||||
"noUnusedParameters": true,
|
||||
"erasableSyntaxOnly": true,
|
||||
"noFallthroughCasesInSwitch": true,
|
||||
"noUncheckedSideEffectImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import react from '@vitejs/plugin-react'
|
||||
|
||||
// https://vite.dev/config/
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
})
|
||||
@@ -1,264 +0,0 @@
|
||||
# 青莳轻食设计系统
|
||||
|
||||
## 颜色方案
|
||||
|
||||
### 主色调 (Primary) - 浅青色/绿色系
|
||||
代表健康、清新、自然的品牌特质
|
||||
|
||||
```css
|
||||
--primary-50: #e8f5e9 /* 超淡绿 - 背景 */
|
||||
--primary-100: #c8e6c9 /* 淡绿 - 次要背景 */
|
||||
--primary-200: #a5d6a7 /* 浅绿 - 悬停状态 */
|
||||
--primary-300: #81c784 /* 中浅绿 */
|
||||
--primary-400: #66bb6a /* 绿 - 次要按钮 */
|
||||
--primary-500: #4caf50 /* 标准绿 - 主按钮、重点文字 ⭐ */
|
||||
--primary-600: #43a047 /* 深绿 - 按钮悬停 */
|
||||
--primary-700: #388e3c /* 较深绿 */
|
||||
--primary-800: #2e7d32 /* 深绿 - 深色主题 */
|
||||
--primary-900: #1b5e20 /* 最深绿 - 强调 */
|
||||
```
|
||||
|
||||
### 辅助色 (Secondary) - 米白色系
|
||||
代表纯净、简约、清洁
|
||||
|
||||
```css
|
||||
--secondary-50: #fafafa /* 超淡灰白 */
|
||||
--secondary-100: #f5f5f5 /* 米白色 - 主要背景 ⭐ */
|
||||
--secondary-200: #eeeeee /* 浅灰白 */
|
||||
--secondary-300: #e0e0e0 /* 边框、分隔线 */
|
||||
--secondary-400: #bdbdbd /* 次要文字 */
|
||||
--secondary-500: #9e9e9e /* 禁用状态 */
|
||||
```
|
||||
|
||||
### 点缀色 (Accent) - 原木色系
|
||||
代表温暖、品质、自然
|
||||
|
||||
```css
|
||||
--accent-50: #f3e5d4 /* 超淡原木色 */
|
||||
--accent-100: #e6d0bc /* 淡原木色 */
|
||||
--accent-200: #d9baa4 /* 浅原木色 */
|
||||
--accent-300: #cca58c /* 中浅原木色 */
|
||||
--accent-400: #bf9074 /* 原木色 */
|
||||
--accent-500: #8b7355 /* 标准原木色 - 桌椅框架 ⭐ */
|
||||
--accent-600: #6d5a43 /* 深原木色 */
|
||||
--accent-700: #4f4132 /* 最深原木色 */
|
||||
```
|
||||
|
||||
## 字体系统
|
||||
|
||||
### 字体家族
|
||||
```css
|
||||
font-sans: 'Inter', system-ui, -apple-system, sans-serif
|
||||
font-serif: ui-serif, Georgia, Cambria, serif
|
||||
font-mono: 'JetBrains Mono', 'Fira Code', monospace
|
||||
```
|
||||
|
||||
### 字号规模 (使用 clamp 实现响应式)
|
||||
```css
|
||||
text-xs: clamp(0.75rem, 0.7rem + 0.25vw, 0.875rem) /* 12-14px */
|
||||
text-sm: clamp(0.875rem, 0.8rem + 0.35vw, 1rem) /* 14-16px */
|
||||
text-base: clamp(1rem, 0.9rem + 0.5vw, 1.125rem) /* 16-18px */
|
||||
text-lg: clamp(1.125rem, 1rem + 0.625vw, 1.25rem) /* 18-20px */
|
||||
text-xl: clamp(1.25rem, 1.1rem + 0.75vw, 1.5rem) /* 20-24px */
|
||||
text-2xl: clamp(1.5rem, 1.3rem + 1vw, 2rem) /* 24-32px */
|
||||
text-3xl: clamp(1.875rem, 1.6rem + 1.375vw, 2.5rem) /* 30-40px */
|
||||
text-4xl: clamp(2.25rem, 1.9rem + 1.75vw, 3rem) /* 36-48px */
|
||||
text-5xl: clamp(3rem, 2.5rem + 2.5vw, 4rem) /* 48-64px */
|
||||
```
|
||||
|
||||
### 字重
|
||||
```css
|
||||
font-light: 300 /* 轻量文字 */
|
||||
font-normal: 400 /* 正文 */
|
||||
font-medium: 500 /* 次要标题 */
|
||||
font-semibold: 600 /* 主要标题 */
|
||||
font-bold: 700 /* 强调标题 */
|
||||
```
|
||||
|
||||
### 行高
|
||||
```css
|
||||
leading-tight: 1.25 /* 标题 */
|
||||
leading-snug: 1.375 /* 副标题 */
|
||||
leading-normal: 1.5 /* 正文 */
|
||||
leading-relaxed: 1.625 /* 舒适正文 */
|
||||
leading-loose: 2 /* 宽松正文 */
|
||||
```
|
||||
|
||||
## 间距系统
|
||||
|
||||
### 基础单位：4px (0.25rem)
|
||||
```css
|
||||
spacing-0: 0 /* 0px */
|
||||
spacing-1: 0.25 /* 4px */
|
||||
spacing-2: 0.5 /* 8px ⭐ 基础单位 */
|
||||
spacing-3: 0.75 /* 12px */
|
||||
spacing-4: 1 /* 16px ⭐ 组件内边距 */
|
||||
spacing-6: 1.5 /* 24px ⭐ 组件间距 */
|
||||
spacing-8: 2 /* 32px ⭐ 区块间距 */
|
||||
spacing-12: 3 /* 48px ⭐ 大区块间距 */
|
||||
spacing-16: 4 /* 64px */
|
||||
spacing-24: 6 /* 96px ⭐ 章节间距 */
|
||||
spacing-32: 8 /* 128px */
|
||||
```
|
||||
|
||||
## 圆角系统
|
||||
```css
|
||||
rounded-none: 0 /* 无圆角 */
|
||||
rounded-sm: 0.125 /* 2px */
|
||||
rounded: 0.25 /* 4px */
|
||||
rounded-md: 0.375 /* 6px ⭐ 卡片 */
|
||||
rounded-lg: 0.5 /* 8px ⭐ 按钮 */
|
||||
rounded-xl: 0.75 /* 12px */
|
||||
rounded-2xl: 1 /* 16px */
|
||||
rounded-3xl: 1.5 /* 24px */
|
||||
rounded-4xl: 2 /* 32px ⭐ 图片容器 */
|
||||
rounded-full: 9999 /* 完全圆形 */
|
||||
```
|
||||
|
||||
## 阴影系统
|
||||
```css
|
||||
shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05)
|
||||
shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06)
|
||||
shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.06)
|
||||
shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05)
|
||||
shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04)
|
||||
shadow-2xl: 0 25px 50px rgba(0, 0, 0, 0.15)
|
||||
shadow-soft: 0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04) ⭐
|
||||
shadow-hard: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
|
||||
```
|
||||
|
||||
## 动画原则 (GSAP)
|
||||
|
||||
### 缓动函数 (Easing)
|
||||
```javascript
|
||||
// 标准缓动
|
||||
"power2.inOut" // 默认，平滑进出
|
||||
"power3.out" // 快进慢出，用于入场
|
||||
"power2.out" // 用于悬停效果
|
||||
|
||||
// 弹性缓动
|
||||
"elastic.out(1, 0.3)" // 弹性效果，用于强调
|
||||
"back.out(1.7)" // 回弹效果，用于卡片
|
||||
|
||||
// 自定义
|
||||
CustomEase.create("custom", "M0,0 C0.14,0 0.242,0.438 0.272,0.561 0.313,0.728 0.354,0.963 0.362,1 0.37,0.985 0.414,0.873 0.455,0.811 0.51,0.726 0.573,0.753 0.586,0.762 0.662,0.812 0.719,0.981 0.726,0.998 0.788,0.914 0.84,0.936 0.859,0.95 0.878,0.964 0.897,0.985 0.911,0.998 0.922,0.994 0.939,0.984 0.954,0.984 0.969,0.984 1,1 1,1")
|
||||
```
|
||||
|
||||
### 持续时间 (Duration)
|
||||
```javascript
|
||||
0.15s // 微交互（按钮点击）
|
||||
0.3s // 快速过渡（悬停效果）
|
||||
0.6s // 标准动画（卡片入场）
|
||||
1.0s // 慢动画（大区块入场）
|
||||
1.5s // 长动画（首屏Hero）
|
||||
```
|
||||
|
||||
### ScrollTrigger 配置
|
||||
```javascript
|
||||
ScrollTrigger.create({
|
||||
trigger: element,
|
||||
start: "top 80%", // 元素顶部到达视口80%位置时触发
|
||||
end: "bottom 20%", // 元素底部离开视口80%位置时结束
|
||||
scrub: 1, // 1秒延迟跟随滚动
|
||||
markers: false, // 开发模式显示标记
|
||||
toggleActions: "play none none reverse"
|
||||
})
|
||||
```
|
||||
|
||||
### 动画时间轴
|
||||
```javascript
|
||||
const tl = gsap.timeline({
|
||||
defaults: { duration: 0.6, ease: "power2.out" }
|
||||
})
|
||||
|
||||
tl.from(".hero-title", { y: 50, opacity: 0 })
|
||||
.from(".hero-subtitle", { y: 30, opacity: 0 }, "-=0.4")
|
||||
.from(".hero-cta", { scale: 0.9, opacity: 0 }, "-=0.3")
|
||||
```
|
||||
|
||||
### Stagger 延迟
|
||||
```javascript
|
||||
gsap.from(".card", {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: {
|
||||
each: 0.1, // 每个元素延迟0.1s
|
||||
from: "start", // 从第一个开始
|
||||
ease: "power2.out"
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
## 组件样式示例
|
||||
|
||||
### 按钮
|
||||
```jsx
|
||||
// 主按钮
|
||||
<button className="px-6 py-3 bg-primary-500 text-white rounded-lg
|
||||
font-medium shadow-md hover:bg-primary-600 hover:shadow-lg
|
||||
transition-all duration-300 transform hover:-translate-y-0.5">
|
||||
了解更多
|
||||
</button>
|
||||
|
||||
// 次要按钮
|
||||
<button className="px-6 py-3 border-2 border-primary-500 text-primary-500
|
||||
rounded-lg font-medium hover:bg-primary-50 transition-colors duration-300">
|
||||
联系我们
|
||||
</button>
|
||||
```
|
||||
|
||||
### 卡片
|
||||
```jsx
|
||||
<div className="bg-white rounded-2xl shadow-soft p-8
|
||||
hover:shadow-xl transition-shadow duration-500
|
||||
border border-gray-100">
|
||||
{/* 卡片内容 */}
|
||||
</div>
|
||||
```
|
||||
|
||||
### 标题
|
||||
```jsx
|
||||
<h1 className="text-5xl font-bold text-gray-900 leading-tight">
|
||||
青莳轻食
|
||||
</h1>
|
||||
<h2 className="text-3xl font-semibold text-gray-800">
|
||||
中高端个性化轻食店铺经营方案
|
||||
</h2>
|
||||
<p className="text-lg text-gray-600 leading-relaxed">
|
||||
食材可溯源、营养可量化、制作可看见
|
||||
</p>
|
||||
```
|
||||
|
||||
## 响应式断点
|
||||
```css
|
||||
sm: 640px /* 小型设备 (手机横屏) */
|
||||
md: 768px /* 中型设备 (平板) */
|
||||
lg: 1024px /* 大型设备 (小笔记本) ⭐ */
|
||||
xl: 1280px /* 超大设备 (桌面) ⭐ */
|
||||
2xl: 1536px /* 超超大设备 (大桌面) */
|
||||
```
|
||||
|
||||
## 布局容器
|
||||
```jsx
|
||||
// 标准容器
|
||||
<div className="container mx-auto px-4 sm:px-6 lg:px-8 max-w-7xl">
|
||||
{/* 内容 */}
|
||||
</div>
|
||||
|
||||
// 全宽容器
|
||||
<div className="w-full">
|
||||
{/* 内容 */}
|
||||
</div>
|
||||
|
||||
// 内容区块
|
||||
<section className="py-24 px-4">
|
||||
{/* 区块内容 */}
|
||||
</section>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**版本**: 1.0
|
||||
**创建时间**: 2025-10-01
|
||||
**适用项目**: 青莳轻食订单班展示网站
|
||||
@@ -1,409 +0,0 @@
|
||||
# 青莳轻食网站信息架构
|
||||
|
||||
## 整体结构
|
||||
|
||||
```
|
||||
青莳轻食订单班展示网站
|
||||
│
|
||||
├── Hero Section (首屏)
|
||||
│ ├── 品牌标题：青莳轻食
|
||||
│ ├── 副标题：中高端个性化轻食店铺经营方案
|
||||
│ ├── 核心数据：1200亿市场规模
|
||||
│ ├── 三大差异化特点
|
||||
│ └── 滚动提示动画
|
||||
│
|
||||
├── Timeline Navigation (固定时间轴导航)
|
||||
│ ├── 进度指示器
|
||||
│ ├── 快速跳转按钮
|
||||
│ └── 当前阶段高亮
|
||||
│
|
||||
├── Content Sections (7个内容区块)
|
||||
│ │
|
||||
│ ├── 1️⃣ 市场调研阶段
|
||||
│ │ ├── 市场规模数据可视化
|
||||
│ │ ├── 客户群体分析（饼图）
|
||||
│ │ ├── 竞争环境分析
|
||||
│ │ └── Agent展示：餐饮市场调研专家
|
||||
│ │
|
||||
│ ├── 2️⃣ 品牌定位阶段
|
||||
│ │ ├── 品牌LOGO展示
|
||||
│ │ ├── 三大差异化优势
|
||||
│ │ │ ├── 食材可溯源（扫码系统）
|
||||
│ │ │ ├── 营养可量化（营养标签）
|
||||
│ │ │ └── 制作可看见（明厨亮灶）
|
||||
│ │ ├── 首店信息（国贸店110㎡）
|
||||
│ │ └── Agent展示：餐饮品牌设计专家
|
||||
│ │
|
||||
│ ├── 3️⃣ 产品研发阶段
|
||||
│ │ ├── 32款菜品矩阵展示
|
||||
│ │ │ ├── 经典沙拉类（10款）
|
||||
│ │ │ ├── 能量碗类（12款）
|
||||
│ │ │ ├── 定制套餐（6款）
|
||||
│ │ │ └── 季节限定（4款）
|
||||
│ │ ├── 核心产品图文展示
|
||||
│ │ │ ├── 青莳虾仁牛油果沙拉 (48元)
|
||||
│ │ │ ├── 青莳香煎牛肉能量碗 (62元)
|
||||
│ │ │ ├── 青莳减脂专属套餐 (65元)
|
||||
│ │ │ └── 青莳夏季芒果鸡胸冷意面 (52元)
|
||||
│ │ ├── 价格体系表格
|
||||
│ │ └── Agent展示：菜品研发专家
|
||||
│ │
|
||||
│ ├── 4️⃣ 选址装修阶段
|
||||
│ │ ├── 选址标准分析
|
||||
│ │ ├── 首店案例：北京国贸B座
|
||||
│ │ │ ├── 店面外观图
|
||||
│ │ │ ├── 店内装修图
|
||||
│ │ │ ├── 功能分区（堂食65㎡+厨房30㎡+收银15㎡）
|
||||
│ │ │ └── 3D平面图
|
||||
│ │ ├── 品牌色彩应用
|
||||
│ │ └── Agent展示：餐厅选址装修专家
|
||||
│ │
|
||||
│ ├── 5️⃣ 团队组建阶段
|
||||
│ │ ├── 8人团队配置
|
||||
│ │ │ ├── 店长（1人，8000-10000元）
|
||||
│ │ │ ├── 厨师（2人，6000-8000元）
|
||||
│ │ │ ├── 服务员（3人，4500-5500元）
|
||||
│ │ │ ├── 营养师（1人，7000-9000元）
|
||||
│ │ │ └── 收银员（1人，4500-5500元）
|
||||
│ │ ├── 团队成员照片展示
|
||||
│ │ ├── 培训体系介绍
|
||||
│ │ └── Agent展示：餐饮团队人员管理专家
|
||||
│ │
|
||||
│ ├── 6️⃣ 财务规划阶段
|
||||
│ │ ├── 初始投资预算（50万元）
|
||||
│ │ │ ├── 店铺租赁（15万）
|
||||
│ │ │ ├── 装修费用（15万）
|
||||
│ │ │ ├── 设备采购（10万）
|
||||
│ │ │ └── 其他费用（10万）
|
||||
│ │ ├── 收入预测可视化
|
||||
│ │ │ ├── 月度收入曲线图
|
||||
│ │ │ ├── 1-3月：13.5万/月
|
||||
│ │ │ ├── 4-6月：20.52万/月
|
||||
│ │ │ └── 7-12月：31.35万/月
|
||||
│ │ ├── 成本结构饼图
|
||||
│ │ ├── 利润预测
|
||||
│ │ │ ├── 第一年净利润：58.032万元
|
||||
│ │ │ ├── 净利率：20%
|
||||
│ │ │ └── 投资回报期：14个月
|
||||
│ │ └── Agent展示：财务预算专家
|
||||
│ │
|
||||
│ └── 7️⃣ 营销推广阶段
|
||||
│ ├── 会员制度
|
||||
│ │ ├── 充值优惠政策
|
||||
│ │ ├── 消费福利体系
|
||||
│ │ └── 会员增长目标
|
||||
│ ├── 线上营销策略
|
||||
│ │ ├── 社交媒体运营
|
||||
│ │ ├── 外卖平台运营
|
||||
│ │ └── KOL合作计划
|
||||
│ ├── 线下推广活动
|
||||
│ │ ├── 写字楼推广
|
||||
│ │ ├── 健身房合作
|
||||
│ │ └── 体验活动
|
||||
│ └── Agent展示：轻食店经营管理专家
|
||||
│
|
||||
└── Summary Section (总结区块)
|
||||
├── 完整方案总结
|
||||
├── 关键成功因素
|
||||
├── 风险管理措施
|
||||
├── 联系方式
|
||||
└── CTA按钮
|
||||
```
|
||||
|
||||
## 导航结构
|
||||
|
||||
### 主导航
|
||||
```
|
||||
├── 首页 (Hero)
|
||||
├── 市场调研
|
||||
├── 品牌定位
|
||||
├── 产品研发
|
||||
├── 选址装修
|
||||
├── 团队组建
|
||||
├── 财务规划
|
||||
└── 营销推广
|
||||
```
|
||||
|
||||
### 时间轴导航
|
||||
- 固定在左侧或右侧
|
||||
- 垂直布局
|
||||
- 跟随滚动更新进度
|
||||
- 点击可快速跳转
|
||||
|
||||
## 页面流程
|
||||
|
||||
### 用户浏览路径
|
||||
```
|
||||
进入首屏
|
||||
↓ 滚动或点击
|
||||
市场调研（了解市场机遇）
|
||||
↓ 滚动
|
||||
品牌定位（理解差异化优势）
|
||||
↓ 滚动
|
||||
产品研发（查看32款菜品）
|
||||
↓ 滚动
|
||||
选址装修（查看首店案例）
|
||||
↓ 滚动
|
||||
团队组建（了解人员配置）
|
||||
↓ 滚动
|
||||
财务规划（查看投资回报）
|
||||
↓ 滚动
|
||||
营销推广（了解推广策略）
|
||||
↓ 滚动
|
||||
总结区块（完整方案总结）
|
||||
```
|
||||
|
||||
## 交互设计
|
||||
|
||||
### 滚动动画
|
||||
```javascript
|
||||
// 区块入场动画
|
||||
gsap.from(".section", {
|
||||
y: 100,
|
||||
opacity: 0,
|
||||
duration: 1,
|
||||
scrollTrigger: {
|
||||
trigger: ".section",
|
||||
start: "top 80%",
|
||||
end: "bottom 20%",
|
||||
toggleActions: "play none none reverse"
|
||||
}
|
||||
})
|
||||
|
||||
// 标题动画
|
||||
gsap.from(".section-title", {
|
||||
y: 50,
|
||||
opacity: 0,
|
||||
duration: 0.8,
|
||||
stagger: 0.2
|
||||
})
|
||||
|
||||
// 卡片stagger动画
|
||||
gsap.from(".card", {
|
||||
y: 80,
|
||||
opacity: 0,
|
||||
duration: 0.6,
|
||||
stagger: 0.15,
|
||||
ease: "power3.out"
|
||||
})
|
||||
```
|
||||
|
||||
### 时间轴导航交互
|
||||
```javascript
|
||||
// 滚动监听
|
||||
window.addEventListener('scroll', () => {
|
||||
const sections = document.querySelectorAll('.timeline-section')
|
||||
sections.forEach((section, index) => {
|
||||
const rect = section.getBoundingClientRect()
|
||||
if (rect.top <= 100 && rect.bottom >= 100) {
|
||||
updateActiveSection(index)
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
// 平滑滚动
|
||||
function scrollToSection(sectionId) {
|
||||
gsap.to(window, {
|
||||
duration: 1.2,
|
||||
scrollTo: {
|
||||
y: `#${sectionId}`,
|
||||
offsetY: 80
|
||||
},
|
||||
ease: "power3.inOut"
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### 图片查看器
|
||||
```javascript
|
||||
// 点击图片放大
|
||||
const [selectedImage, setSelectedImage] = useState(null)
|
||||
|
||||
// 全屏模态框
|
||||
<Modal open={!!selectedImage}>
|
||||
<img src={selectedImage?.full} />
|
||||
<Controls zoom scale rotate />
|
||||
</Modal>
|
||||
```
|
||||
|
||||
### 数据可视化
|
||||
```javascript
|
||||
// 使用GSAP动画化图表
|
||||
gsap.to(".chart-bar", {
|
||||
height: data.value + "%",
|
||||
duration: 1,
|
||||
ease: "power2.out",
|
||||
stagger: 0.1
|
||||
})
|
||||
|
||||
// 数字计数动画
|
||||
gsap.to(".counter", {
|
||||
textContent: targetValue,
|
||||
duration: 2,
|
||||
ease: "power1.inOut",
|
||||
snap: { textContent: 1 }
|
||||
})
|
||||
```
|
||||
|
||||
## 响应式布局
|
||||
|
||||
### 桌面端 (≥1024px)
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Hero Section (全屏) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Timeline Nav │ Content Section │
|
||||
│ (固定左侧) │ (主内容区) │
|
||||
│ │ │
|
||||
│ ▸ 调研 │ [市场数据图表] │
|
||||
│ ▸ 定位 │ [文字说明] │
|
||||
│ ● 产品 │ [图片展示] │
|
||||
│ ▸ 选址 │ [Agent卡片] │
|
||||
│ ▸ 团队 │ │
|
||||
│ ▸ 财务 │ │
|
||||
│ ▸ 营销 │ │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 平板端 (768px - 1023px)
|
||||
```
|
||||
┌─────────────────────────────────────┐
|
||||
│ Hero Section (全屏) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Timeline Nav (顶部横向) │
|
||||
├─────────────────────────────────────┤
|
||||
│ Content Section (单列) │
|
||||
│ [内容区块] │
|
||||
│ [图片展示] │
|
||||
│ [Agent卡片] │
|
||||
└─────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 移动端 (<768px)
|
||||
```
|
||||
┌─────────────┐
|
||||
│ Hero │
|
||||
│ (简化版) │
|
||||
├─────────────┤
|
||||
│ Nav Button │
|
||||
│ (汉堡菜单) │
|
||||
├─────────────┤
|
||||
│ Content │
|
||||
│ (单列) │
|
||||
│ [文字] │
|
||||
│ [图片] │
|
||||
│ [卡片] │
|
||||
└─────────────┘
|
||||
```
|
||||
|
||||
## 组件层级
|
||||
|
||||
```
|
||||
App
|
||||
├── HeroSection
|
||||
│ ├── HeroTitle
|
||||
│ ├── HeroSubtitle
|
||||
│ ├── HeroStats
|
||||
│ └── ScrollIndicator
|
||||
├── TimelineNav
|
||||
│ ├── NavItem (×7)
|
||||
│ └── ProgressBar
|
||||
├── ContentSections
|
||||
│ ├── MarketResearchSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── DataVisualization
|
||||
│ │ ├── TextContent
|
||||
│ │ └── AgentCard
|
||||
│ ├── BrandPositioningSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── BrandLogo
|
||||
│ │ ├── DifferentiationPoints
|
||||
│ │ └── AgentCard
|
||||
│ ├── ProductDevelopmentSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── ProductGrid
|
||||
│ │ │ └── ProductCard (×32)
|
||||
│ │ ├── PriceTable
|
||||
│ │ └── AgentCard
|
||||
│ ├── LocationDesignSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── LocationInfo
|
||||
│ │ ├── FloorPlan
|
||||
│ │ └── AgentCard
|
||||
│ ├── TeamBuildingSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── TeamGrid
|
||||
│ │ │ └── MemberCard (×8)
|
||||
│ │ └── AgentCard
|
||||
│ ├── FinancialPlanningSection
|
||||
│ │ ├── SectionHeader
|
||||
│ │ ├── BudgetChart
|
||||
│ │ ├── RevenueChart
|
||||
│ │ ├── ProfitSummary
|
||||
│ │ └── AgentCard
|
||||
│ └── MarketingSection
|
||||
│ ├── SectionHeader
|
||||
│ ├── MembershipProgram
|
||||
│ ├── OnlineMarketing
|
||||
│ ├── OfflinePromotion
|
||||
│ └── AgentCard
|
||||
└── SummarySection
|
||||
├── KeyTakeaways
|
||||
├── RiskManagement
|
||||
└── CTAButtons
|
||||
```
|
||||
|
||||
## 数据流
|
||||
|
||||
```
|
||||
content_checklist.json (数据源)
|
||||
↓
|
||||
TypeScript 接口定义
|
||||
↓
|
||||
Zustand 状态管理
|
||||
↓
|
||||
React 组件树
|
||||
↓
|
||||
用户界面
|
||||
```
|
||||
|
||||
## 性能优化
|
||||
|
||||
### 图片懒加载
|
||||
```javascript
|
||||
import { LazyLoadImage } from 'react-lazy-load-image-component'
|
||||
|
||||
<LazyLoadImage
|
||||
src={image.full}
|
||||
placeholder={<Skeleton />}
|
||||
effect="blur"
|
||||
/>
|
||||
```
|
||||
|
||||
### 代码分割
|
||||
```javascript
|
||||
import { lazy, Suspense } from 'react'
|
||||
|
||||
const ProductSection = lazy(() => import('./sections/ProductSection'))
|
||||
|
||||
<Suspense fallback={<Loading />}>
|
||||
<ProductSection />
|
||||
</Suspense>
|
||||
```
|
||||
|
||||
### GSAP性能
|
||||
```javascript
|
||||
// 使用will-change提示浏览器
|
||||
gsap.set(".animate-element", { willChange: "transform" })
|
||||
|
||||
// 动画完成后清除
|
||||
onComplete: () => {
|
||||
gsap.set(".animate-element", { clearProps: "willChange" })
|
||||
}
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
**版本**: 1.0
|
||||
**创建时间**: 2025-10-01
|
||||
**下一步**: 开始组件开发
|
||||
@@ -1,6 +0,0 @@
|
||||
export default {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@@ -1,26 +0,0 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
* {
|
||||
@apply border-border;
|
||||
}
|
||||
|
||||
body {
|
||||
@apply bg-white text-gray-900;
|
||||
font-family: 'Inter', system-ui, -apple-system, sans-serif;
|
||||
}
|
||||
|
||||
html {
|
||||
scroll-behavior: smooth;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
/* 自定义组件样式 */
|
||||
}
|
||||
|
||||
@layer utilities {
|
||||
/* 自定义工具类 */
|
||||
}
|
||||
@@ -1,60 +0,0 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
export default {
|
||||
content: [
|
||||
"./index.html",
|
||||
"./src/**/*.{js,ts,jsx,tsx}",
|
||||
],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
primary: {
|
||||
50: '#e8f5e9',
|
||||
100: '#c8e6c9',
|
||||
200: '#a5d6a7',
|
||||
300: '#81c784',
|
||||
400: '#66bb6a',
|
||||
500: '#4caf50', // 主色 - 浅青色/绿色
|
||||
600: '#43a047',
|
||||
700: '#388e3c',
|
||||
800: '#2e7d32',
|
||||
900: '#1b5e20',
|
||||
},
|
||||
secondary: {
|
||||
50: '#fafafa',
|
||||
100: '#f5f5f5', // 米白色
|
||||
200: '#eeeeee',
|
||||
300: '#e0e0e0',
|
||||
400: '#bdbdbd',
|
||||
500: '#9e9e9e',
|
||||
},
|
||||
accent: {
|
||||
50: '#f3e5d4',
|
||||
100: '#e6d0bc',
|
||||
200: '#d9baa4',
|
||||
300: '#cca58c',
|
||||
400: '#bf9074',
|
||||
500: '#8b7355', // 原木色
|
||||
600: '#6d5a43',
|
||||
700: '#4f4132',
|
||||
},
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['Inter', 'system-ui', '-apple-system', 'sans-serif'],
|
||||
serif: ['ui-serif', 'Georgia', 'Cambria', 'serif'],
|
||||
mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
|
||||
},
|
||||
spacing: {
|
||||
'128': '32rem',
|
||||
'144': '36rem',
|
||||
},
|
||||
borderRadius: {
|
||||
'4xl': '2rem',
|
||||
},
|
||||
boxShadow: {
|
||||
'soft': '0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04)',
|
||||
'hard': '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
|
||||
},
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
Reference in New Issue
Block a user