1189 lines
37 KiB
HTML
1189 lines
37 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="zh-CN">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|||
|
|
<title>青莳轻食 - 中高端个性化轻食店铺经营方案</title>
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>
|
|||
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollToPlugin.min.js"></script>
|
|||
|
|
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700;900&display=swap" rel="stylesheet">
|
|||
|
|
<style>
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:root {
|
|||
|
|
/* 主色调 - 清新自然系 */
|
|||
|
|
--primary: #4CAF50;
|
|||
|
|
--primary-light: #81C784;
|
|||
|
|
--primary-dark: #388E3C;
|
|||
|
|
--accent: #FF9800;
|
|||
|
|
--accent-light: #FFB74D;
|
|||
|
|
|
|||
|
|
/* 中性色 */
|
|||
|
|
--background: #FAFAFA;
|
|||
|
|
--surface: #FFFFFF;
|
|||
|
|
--text-primary: #212121;
|
|||
|
|
--text-secondary: #757575;
|
|||
|
|
--border: #E0E0E0;
|
|||
|
|
|
|||
|
|
/* 阴影 */
|
|||
|
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
|||
|
|
--shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|||
|
|
--shadow-md: 0 4px 8px rgba(0, 0, 0, 0.12);
|
|||
|
|
--shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.15);
|
|||
|
|
--shadow-primary: 0 4px 12px rgba(76, 175, 80, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, sans-serif;
|
|||
|
|
background: var(--background);
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Hero Section */
|
|||
|
|
.hero-section {
|
|||
|
|
height: 100vh;
|
|||
|
|
background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(129, 199, 132, 0.8)),
|
|||
|
|
url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 800"><rect fill="%234CAF50" width="1200" height="800"/></svg>');
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-content {
|
|||
|
|
text-align: center;
|
|||
|
|
color: white;
|
|||
|
|
z-index: 2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-title {
|
|||
|
|
font-size: 4rem;
|
|||
|
|
font-weight: 900;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
letter-spacing: 0.05em;
|
|||
|
|
text-shadow: 2px 4px 8px rgba(0, 0, 0, 0.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-subtitle {
|
|||
|
|
font-size: 1.5rem;
|
|||
|
|
font-weight: 300;
|
|||
|
|
margin-bottom: 3rem;
|
|||
|
|
letter-spacing: 0.1em;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-indicator {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 2rem;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
color: white;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.scroll-arrow {
|
|||
|
|
width: 24px;
|
|||
|
|
height: 24px;
|
|||
|
|
border-bottom: 2px solid white;
|
|||
|
|
border-right: 2px solid white;
|
|||
|
|
transform: rotate(45deg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Timeline Navigation */
|
|||
|
|
.timeline-nav {
|
|||
|
|
position: fixed;
|
|||
|
|
left: 2rem;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
z-index: 100;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
gap: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-item {
|
|||
|
|
position: relative;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-dot {
|
|||
|
|
width: 16px;
|
|||
|
|
height: 16px;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: var(--text-secondary);
|
|||
|
|
border: 3px solid white;
|
|||
|
|
box-shadow: var(--shadow);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-item.active .timeline-dot {
|
|||
|
|
width: 20px;
|
|||
|
|
height: 20px;
|
|||
|
|
background: var(--primary);
|
|||
|
|
box-shadow: var(--shadow-primary);
|
|||
|
|
transform: scale(1.3);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-label {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 2rem;
|
|||
|
|
top: 50%;
|
|||
|
|
transform: translateY(-50%);
|
|||
|
|
white-space: nowrap;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
opacity: 0;
|
|||
|
|
pointer-events: none;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
background: white;
|
|||
|
|
padding: 0.5rem 1rem;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
box-shadow: var(--shadow);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-item:hover .timeline-label {
|
|||
|
|
opacity: 1;
|
|||
|
|
left: 2.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-progress {
|
|||
|
|
position: absolute;
|
|||
|
|
left: 50%;
|
|||
|
|
top: 0;
|
|||
|
|
width: 2px;
|
|||
|
|
height: 0;
|
|||
|
|
background: var(--primary);
|
|||
|
|
transform: translateX(-50%);
|
|||
|
|
z-index: -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Content Section */
|
|||
|
|
.content-section {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 6rem 4rem;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-header {
|
|||
|
|
text-align: center;
|
|||
|
|
margin-bottom: 4rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-icon {
|
|||
|
|
font-size: 3rem;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-subtitle {
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
line-height: 1.75;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Card Grid */
|
|||
|
|
.card-grid {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
margin-top: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card {
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 2rem;
|
|||
|
|
box-shadow: var(--shadow);
|
|||
|
|
transition: all 0.4s ease;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card:hover {
|
|||
|
|
transform: translateY(-8px) scale(1.02);
|
|||
|
|
box-shadow: var(--shadow-lg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-title {
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
color: var(--primary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-content {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
line-height: 1.75;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Image Gallery */
|
|||
|
|
.image-gallery {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|||
|
|
gap: 1.5rem;
|
|||
|
|
margin-top: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item {
|
|||
|
|
position: relative;
|
|||
|
|
aspect-ratio: 4/3;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
overflow: hidden;
|
|||
|
|
box-shadow: var(--shadow);
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item:hover {
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
box-shadow: var(--shadow-lg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
transition: all 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item:hover img {
|
|||
|
|
filter: brightness(1.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-caption {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
|||
|
|
color: white;
|
|||
|
|
padding: 1rem;
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
transition: transform 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.gallery-item:hover .gallery-caption {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Stats Section */
|
|||
|
|
.stats-container {
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|||
|
|
gap: 2rem;
|
|||
|
|
margin-top: 3rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-item {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 2rem;
|
|||
|
|
background: white;
|
|||
|
|
border-radius: 12px;
|
|||
|
|
box-shadow: var(--shadow);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-value {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
font-weight: 700;
|
|||
|
|
color: var(--primary);
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Background Pattern */
|
|||
|
|
.bg-pattern {
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
opacity: 0.05;
|
|||
|
|
background-image:
|
|||
|
|
repeating-linear-gradient(45deg, var(--primary) 0, var(--primary) 1px, transparent 0, transparent 50%),
|
|||
|
|
repeating-linear-gradient(-45deg, var(--primary) 0, var(--primary) 1px, transparent 0, transparent 50%);
|
|||
|
|
background-size: 20px 20px;
|
|||
|
|
z-index: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Responsive */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
.hero-title {
|
|||
|
|
font-size: 2.5rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-subtitle {
|
|||
|
|
font-size: 1.125rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.content-section {
|
|||
|
|
padding: 4rem 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-nav {
|
|||
|
|
display: none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: 2rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card-grid {
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- Timeline Navigation -->
|
|||
|
|
<nav class="timeline-nav" id="timelineNav">
|
|||
|
|
<div class="timeline-progress"></div>
|
|||
|
|
<div class="timeline-item active" data-section="market">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<div class="timeline-label">市场调研</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="brand">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<div class="timeline-label">品牌设计</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="location">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<div class="timeline-label">选址装修</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="menu">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<div class="timeline-label">菜品研发</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="operation">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<div class="timeline-label">运营管理</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="team">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<div class="timeline-label">团队配置</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="finance">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<div class="timeline-label">财务预算</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- Hero Section -->
|
|||
|
|
<section class="hero-section" id="hero">
|
|||
|
|
<div class="hero-content">
|
|||
|
|
<h1 class="hero-title">青莳轻食</h1>
|
|||
|
|
<p class="hero-subtitle">食材可溯源 · 营养可量化 · 制作可看见</p>
|
|||
|
|
<div class="hero-description" style="font-size: 1.125rem; opacity: 0.9; max-width: 600px; margin: 0 auto;">
|
|||
|
|
重新定义中高端轻食体验<br>
|
|||
|
|
让健康生活方式触手可及
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="scroll-indicator">
|
|||
|
|
<span style="font-size: 0.875rem; margin-bottom: 0.5rem;">向下滚动</span>
|
|||
|
|
<div class="scroll-arrow"></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 1: 市场调研 -->
|
|||
|
|
<section class="content-section timeline-section" id="market" style="background: white;">
|
|||
|
|
<div class="section-container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">📊</div>
|
|||
|
|
<h2 class="section-title">市场调研分析</h2>
|
|||
|
|
<p class="section-subtitle">
|
|||
|
|
深度洞察轻食赛道，精准定位目标客群<br>
|
|||
|
|
国贸CBD核心商圈，25-40岁高收入白领群体
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-grid">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">市场规模</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>2024年中国轻食市场规模突破<strong>1200亿元</strong></p>
|
|||
|
|
<p style="margin-top: 1rem;">年增长率保持在<strong>25%</strong>以上</p>
|
|||
|
|
<p style="margin-top: 1rem;">一线城市渗透率达<strong>35%</strong></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">目标客群</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>✓ 年龄：<strong>25-40岁</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">✓ 收入：<strong>月收入8000元+</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">✓ 职业：<strong>白领、健身人群</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">✓ 诉求：<strong>健康、便捷、品质</strong></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">竞品分析</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>国贸商圈现有轻食品牌<strong>8家</strong></p>
|
|||
|
|
<p style="margin-top: 1rem;">差异化优势：<strong>食材溯源</strong>、<strong>营养量化</strong>、<strong>透明厨房</strong></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">消费趋势</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>• 健康饮食意识提升</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 个性化定制需求增长</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 食品安全高度关注</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 外卖+堂食双渠道</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 2: 品牌设计 -->
|
|||
|
|
<section class="content-section timeline-section" id="brand">
|
|||
|
|
<div class="section-container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">🎨</div>
|
|||
|
|
<h2 class="section-title">品牌形象设计</h2>
|
|||
|
|
<p class="section-subtitle">
|
|||
|
|
"青莳"二字蕴含清新健康之意<br>
|
|||
|
|
打造中高端轻食品牌的视觉识别系统
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-grid">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">品牌定位</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p><strong>中高端透明化轻食品牌</strong></p>
|
|||
|
|
<p style="margin-top: 1rem;">核心理念：</p>
|
|||
|
|
<p>• 食材可溯源（安心）</p>
|
|||
|
|
<p>• 营养可量化（科学）</p>
|
|||
|
|
<p>• 制作可看见（透明）</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">视觉系统</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>主色调：<span style="color: #4CAF50; font-weight: 600;">清新绿</span></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">辅助色：<span style="color: #FF9800; font-weight: 600;">活力橙</span></p>
|
|||
|
|
<p style="margin-top: 1rem;">Logo设计体现：</p>
|
|||
|
|
<p>• 自然健康元素</p>
|
|||
|
|
<p>• 现代简约风格</p>
|
|||
|
|
<p>• 高辨识度</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">空间设计</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>透明开放式厨房设计</p>
|
|||
|
|
<p style="margin-top: 1rem;">• 让顾客看到制作过程</p>
|
|||
|
|
<p>• 增强信任感</p>
|
|||
|
|
<p>• 提升品牌形象</p>
|
|||
|
|
<p style="margin-top: 1rem;">日式简约风格装修</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">传播策略</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>线上：小红书+抖音+微信</p>
|
|||
|
|
<p style="margin-top: 1rem;">线下：写字楼电梯广告</p>
|
|||
|
|
<p style="margin-top: 1rem;">口碑：KOC种草+会员体系</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 3: 选址装修 -->
|
|||
|
|
<section class="content-section timeline-section" id="location" style="background: white;">
|
|||
|
|
<div class="section-container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">🏗️</div>
|
|||
|
|
<h2 class="section-title">选址与装修方案</h2>
|
|||
|
|
<p class="section-subtitle">
|
|||
|
|
北京朝阳区国贸中心B座1层108商铺<br>
|
|||
|
|
110㎡黄金位置，日均人流量超10000人
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stats-container">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">110㎡</div>
|
|||
|
|
<div class="stat-label">总面积</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">65㎡</div>
|
|||
|
|
<div class="stat-label">堂食区</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">30㎡</div>
|
|||
|
|
<div class="stat-label">厨房区</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">15㎡</div>
|
|||
|
|
<div class="stat-label">咨询区</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-grid" style="margin-top: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">选址优势</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>✓ 国贸CBD核心商圈</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">✓ 写字楼一层临街位置</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">✓ 目标客群高度集中</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">✓ 交通便利，地铁直达</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">装修风格</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>现代简约 + 日式自然</p>
|
|||
|
|
<p style="margin-top: 1rem;">• 原木色系为主</p>
|
|||
|
|
<p>• 大面积绿植点缀</p>
|
|||
|
|
<p>• 充足自然采光</p>
|
|||
|
|
<p>• 开放式透明厨房</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">功能分区</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p><strong>堂食区（65㎡）</strong></p>
|
|||
|
|
<p>• 30个餐位</p>
|
|||
|
|
<p style="margin-top: 1rem;"><strong>厨房区（30㎡）</strong></p>
|
|||
|
|
<p>• 透明玻璃设计</p>
|
|||
|
|
<p style="margin-top: 1rem;"><strong>咨询区（15㎡）</strong></p>
|
|||
|
|
<p>• 营养师服务台</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">投资预算</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>装修投入：<strong>30万元</strong></p>
|
|||
|
|
<p style="margin-top: 1rem;">设备采购：<strong>15万元</strong></p>
|
|||
|
|
<p style="margin-top: 1rem;">流动资金：<strong>15万元</strong></p>
|
|||
|
|
<p style="margin-top: 1rem; font-weight: 600; color: #4CAF50;">总投资：60万元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 4: 菜品研发 -->
|
|||
|
|
<section class="content-section timeline-section" id="menu">
|
|||
|
|
<div class="section-container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">👨🍳</div>
|
|||
|
|
<h2 class="section-title">菜品研发体系</h2>
|
|||
|
|
<p class="section-subtitle">
|
|||
|
|
32款精选轻食产品，营养均衡搭配<br>
|
|||
|
|
客单价45-68元，满足不同需求
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-grid">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">产品矩阵</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p><strong>沙拉系列</strong>（12款）</p>
|
|||
|
|
<p>• 经典凯撒沙拉</p>
|
|||
|
|
<p>• 牛油果虾仁沙拉</p>
|
|||
|
|
<p>• 鸡胸肉能量碗</p>
|
|||
|
|
<p style="margin-top: 1rem;"><strong>能量碗系列</strong>（10款）</p>
|
|||
|
|
<p style="margin-top: 1rem;"><strong>定制套餐</strong>（10款）</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">营养配比</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>每份产品标注：</p>
|
|||
|
|
<p style="margin-top: 1rem;">✓ 卡路里（300-600kcal）</p>
|
|||
|
|
<p>✓ 蛋白质含量（≥25g）</p>
|
|||
|
|
<p>✓ 膳食纤维（≥10g）</p>
|
|||
|
|
<p>✓ 营养成分占比</p>
|
|||
|
|
<p style="margin-top: 1rem;">符合中国营养学会标准</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">食材溯源</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>每份食材可追溯：</p>
|
|||
|
|
<p style="margin-top: 1rem;">• 蔬菜：有机农场直供</p>
|
|||
|
|
<p>• 肉类：品牌供应商</p>
|
|||
|
|
<p>• 海鲜：冷链直达</p>
|
|||
|
|
<p style="margin-top: 1rem;">扫码即可查看食材来源</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">定价策略</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>基础款：<strong>45-52元</strong></p>
|
|||
|
|
<p style="margin-top: 1rem;">进阶款：<strong>53-60元</strong></p>
|
|||
|
|
<p style="margin-top: 1rem;">定制款：<strong>61-68元</strong></p>
|
|||
|
|
<p style="margin-top: 1rem; color: #4CAF50; font-weight: 600;">平均客单价：55元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stats-container" style="margin-top: 3rem;">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">32款</div>
|
|||
|
|
<div class="stat-label">产品SKU</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">55元</div>
|
|||
|
|
<div class="stat-label">平均客单价</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">100%</div>
|
|||
|
|
<div class="stat-label">食材可溯源</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">≤15分</div>
|
|||
|
|
<div class="stat-label">制作时间</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 5: 运营管理 -->
|
|||
|
|
<section class="content-section timeline-section" id="operation" style="background: white;">
|
|||
|
|
<div class="section-container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">🍽️</div>
|
|||
|
|
<h2 class="section-title">运营管理体系</h2>
|
|||
|
|
<p class="section-subtitle">
|
|||
|
|
标准化流程，质量可控<br>
|
|||
|
|
打造高效运营的轻食连锁模式
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-grid">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">运营时间</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p><strong>周一至周五</strong></p>
|
|||
|
|
<p>早餐：07:30-10:00</p>
|
|||
|
|
<p>午餐：11:00-14:00</p>
|
|||
|
|
<p>晚餐：17:00-20:00</p>
|
|||
|
|
<p style="margin-top: 1rem;"><strong>周末</strong></p>
|
|||
|
|
<p>10:00-20:00</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">标准化流程</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>• 食材验收标准（30项）</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 制作工艺标准（50项）</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 服务流程标准（20项）</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 卫生清洁标准（40项）</p>
|
|||
|
|
<p style="margin-top: 1rem;">全流程SOP文档</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">质量控制</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>✓ 每日食材检验</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">✓ 制作过程监控</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">✓ 出品温度检测</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">✓ 顾客满意度调查</p>
|
|||
|
|
<p style="margin-top: 1rem;">目标：零食安事故</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">数字化管理</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>• ERP系统管理库存</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• POS系统记录销售</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 会员系统维护客户</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 数据分析优化运营</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 6: 团队配置 -->
|
|||
|
|
<section class="content-section timeline-section" id="team">
|
|||
|
|
<div class="section-container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">👥</div>
|
|||
|
|
<h2 class="section-title">团队人员配置</h2>
|
|||
|
|
<p class="section-subtitle">
|
|||
|
|
12人精干团队，分工明确<br>
|
|||
|
|
专业培训体系，确保服务品质
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-grid">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">店长（1人）</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>• 全面负责店铺运营</p>
|
|||
|
|
<p>• 人员管理与排班</p>
|
|||
|
|
<p>• 成本控制与数据分析</p>
|
|||
|
|
<p style="margin-top: 1rem; color: #4CAF50; font-weight: 600;">月薪：8000-10000元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">厨师（4人）</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>主厨1人 + 配菜师3人</p>
|
|||
|
|
<p style="margin-top: 1rem;">• 菜品制作</p>
|
|||
|
|
<p>• 食材处理</p>
|
|||
|
|
<p>• 品质把控</p>
|
|||
|
|
<p style="margin-top: 1rem; color: #4CAF50; font-weight: 600;">月薪：5000-7000元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">服务员（4人）</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>• 堂食服务</p>
|
|||
|
|
<p>• 点单收银</p>
|
|||
|
|
<p>• 清洁维护</p>
|
|||
|
|
<p>• 顾客沟通</p>
|
|||
|
|
<p style="margin-top: 1rem; color: #4CAF50; font-weight: 600;">月薪：4000-5000元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">营养师（1人）</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>• 菜品营养配比</p>
|
|||
|
|
<p>• 顾客饮食咨询</p>
|
|||
|
|
<p>• 定制方案设计</p>
|
|||
|
|
<p style="margin-top: 1rem; color: #4CAF50; font-weight: 600;">月薪：6000-8000元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">采购+库管（1人）</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>• 食材采购</p>
|
|||
|
|
<p>• 库存管理</p>
|
|||
|
|
<p>• 供应商对接</p>
|
|||
|
|
<p style="margin-top: 1rem; color: #4CAF50; font-weight: 600;">月薪：5000-6000元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">外卖配送（1人）</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>• 周边3公里配送</p>
|
|||
|
|
<p>• 确保送餐时效</p>
|
|||
|
|
<p>• 维护顾客关系</p>
|
|||
|
|
<p style="margin-top: 1rem; color: #4CAF50; font-weight: 600;">月薪：4000-5000元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stats-container" style="margin-top: 3rem;">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">12人</div>
|
|||
|
|
<div class="stat-label">团队规模</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">6.5万</div>
|
|||
|
|
<div class="stat-label">月人工成本</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">30天</div>
|
|||
|
|
<div class="stat-label">入职培训</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">100%</div>
|
|||
|
|
<div class="stat-label">持证上岗</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 7: 财务预算 -->
|
|||
|
|
<section class="content-section timeline-section" id="finance" style="background: white;">
|
|||
|
|
<div class="section-container">
|
|||
|
|
<div class="section-header">
|
|||
|
|
<div class="section-icon">💰</div>
|
|||
|
|
<h2 class="section-title">财务预算与回报</h2>
|
|||
|
|
<p class="section-subtitle">
|
|||
|
|
总投资60万元，预计15个月回本<br>
|
|||
|
|
首年营收目标290万元，净利润75万元
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stats-container">
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">60万</div>
|
|||
|
|
<div class="stat-label">初期投资</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">24.5万</div>
|
|||
|
|
<div class="stat-label">月均营收</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">290万</div>
|
|||
|
|
<div class="stat-label">年营收</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">75万</div>
|
|||
|
|
<div class="stat-label">年净利润</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">26%</div>
|
|||
|
|
<div class="stat-label">净利润率</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-item">
|
|||
|
|
<div class="stat-value">15个月</div>
|
|||
|
|
<div class="stat-label">回本周期</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card-grid" style="margin-top: 3rem;">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">投资明细</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>装修费用：<strong>30万元</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 硬装：18万</p>
|
|||
|
|
<p>• 软装：8万</p>
|
|||
|
|
<p>• 透明厨房：4万</p>
|
|||
|
|
<p style="margin-top: 1rem;">设备采购：<strong>15万元</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">• 厨房设备：10万</p>
|
|||
|
|
<p>• 收银系统：2万</p>
|
|||
|
|
<p>• 其他设备：3万</p>
|
|||
|
|
<p style="margin-top: 1rem;">流动资金：<strong>15万元</strong></p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">月度营收</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p><strong>堂食营收</strong></p>
|
|||
|
|
<p>日均60单 × 55元 = 3300元</p>
|
|||
|
|
<p>月营收：9.9万元</p>
|
|||
|
|
<p style="margin-top: 1rem;"><strong>外卖营收</strong></p>
|
|||
|
|
<p>日均100单 × 48元 = 4800元</p>
|
|||
|
|
<p>月营收：14.4万元</p>
|
|||
|
|
<p style="margin-top: 1rem; color: #4CAF50; font-weight: 600;">月总营收：24.3万元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">月度成本</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>房租：<strong>3.5万元</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">人工：<strong>6.5万元</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">食材：<strong>7.3万元</strong>（30%）</p>
|
|||
|
|
<p style="margin-top: 0.5rem;">水电：<strong>0.8万元</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">其他：<strong>0.6万元</strong></p>
|
|||
|
|
<p style="margin-top: 1rem; color: #FF9800; font-weight: 600;">月总成本：18.7万元</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 class="card-title">盈利分析</h3>
|
|||
|
|
<div class="card-content">
|
|||
|
|
<p>月营收：<strong>24.3万元</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">月成本：<strong>18.7万元</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">月净利：<strong>5.6万元</strong></p>
|
|||
|
|
<p style="margin-top: 1rem;">年净利润：<strong>67万元</strong></p>
|
|||
|
|
<p style="margin-top: 0.5rem;">净利润率：<strong>23%</strong></p>
|
|||
|
|
<p style="margin-top: 1rem; color: #4CAF50; font-weight: 600;">投资回报率：112%</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-top: 4rem; padding: 2rem; background: linear-gradient(135deg, #4CAF50, #81C784); border-radius: 12px; color: white; text-align: center;">
|
|||
|
|
<h3 style="font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem;">核心优势总结</h3>
|
|||
|
|
<div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1.5rem; margin-top: 2rem;">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size: 2rem; margin-bottom: 0.5rem;">✓</div>
|
|||
|
|
<div style="font-weight: 600;">食材可溯源</div>
|
|||
|
|
<div style="font-size: 0.875rem; opacity: 0.9; margin-top: 0.25rem;">建立信任</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size: 2rem; margin-bottom: 0.5rem;">✓</div>
|
|||
|
|
<div style="font-weight: 600;">营养可量化</div>
|
|||
|
|
<div style="font-size: 0.875rem; opacity: 0.9; margin-top: 0.25rem;">科学配餐</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size: 2rem; margin-bottom: 0.5rem;">✓</div>
|
|||
|
|
<div style="font-weight: 600;">制作可看见</div>
|
|||
|
|
<div style="font-size: 0.875rem; opacity: 0.9; margin-top: 0.25rem;">透明厨房</div>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-size: 2rem; margin-bottom: 0.5rem;">✓</div>
|
|||
|
|
<div style="font-weight: 600;">15个月回本</div>
|
|||
|
|
<div style="font-size: 0.875rem; opacity: 0.9; margin-top: 0.25rem;">快速盈利</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Register GSAP plugins
|
|||
|
|
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
|
|||
|
|
|
|||
|
|
// Hero Section Animation
|
|||
|
|
gsap.from('.hero-title', {
|
|||
|
|
y: 60,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 1.2,
|
|||
|
|
ease: 'elastic.out(1, 0.5)',
|
|||
|
|
delay: 0.3
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
gsap.from('.hero-subtitle', {
|
|||
|
|
y: 40,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
delay: 0.6
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
gsap.from('.hero-description', {
|
|||
|
|
y: 30,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.6,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
delay: 0.9
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
gsap.from('.scroll-indicator', {
|
|||
|
|
y: 20,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.6,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
delay: 1.2
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Scroll indicator animation loop
|
|||
|
|
gsap.to('.scroll-arrow', {
|
|||
|
|
y: 10,
|
|||
|
|
duration: 1.5,
|
|||
|
|
ease: 'sine.inOut',
|
|||
|
|
repeat: -1,
|
|||
|
|
yoyo: true
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Timeline Navigation Animation
|
|||
|
|
gsap.from('.timeline-nav', {
|
|||
|
|
x: -100,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
ease: 'power3.out',
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: 'body',
|
|||
|
|
start: 'top top',
|
|||
|
|
end: '100px top',
|
|||
|
|
scrub: 1
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Timeline Progress
|
|||
|
|
gsap.to('.timeline-progress', {
|
|||
|
|
height: '100%',
|
|||
|
|
ease: 'none',
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: 'body',
|
|||
|
|
start: 'top top',
|
|||
|
|
end: 'bottom bottom',
|
|||
|
|
scrub: true
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Section Animations
|
|||
|
|
const sections = gsap.utils.toArray('.timeline-section');
|
|||
|
|
sections.forEach((section) => {
|
|||
|
|
// Section Header Animation
|
|||
|
|
gsap.from(section.querySelector('.section-header'), {
|
|||
|
|
y: 50,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top 75%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Cards Animation
|
|||
|
|
const cards = section.querySelectorAll('.card');
|
|||
|
|
if (cards.length > 0) {
|
|||
|
|
gsap.from(cards, {
|
|||
|
|
y: 60,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.6,
|
|||
|
|
stagger: 0.15,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top 70%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Stats Animation
|
|||
|
|
const stats = section.querySelectorAll('.stat-item');
|
|||
|
|
if (stats.length > 0) {
|
|||
|
|
gsap.from(stats, {
|
|||
|
|
scale: 0.8,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.5,
|
|||
|
|
stagger: 0.1,
|
|||
|
|
ease: 'back.out(1.7)',
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top 70%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Timeline Navigation - Active State
|
|||
|
|
const timelineItems = document.querySelectorAll('.timeline-item');
|
|||
|
|
const timelineSections = document.querySelectorAll('.timeline-section');
|
|||
|
|
|
|||
|
|
window.addEventListener('scroll', () => {
|
|||
|
|
let current = '';
|
|||
|
|
|
|||
|
|
timelineSections.forEach((section) => {
|
|||
|
|
const sectionTop = section.offsetTop;
|
|||
|
|
const sectionHeight = section.clientHeight;
|
|||
|
|
if (window.pageYOffset >= sectionTop - 200) {
|
|||
|
|
current = section.getAttribute('id');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
timelineItems.forEach((item) => {
|
|||
|
|
item.classList.remove('active');
|
|||
|
|
if (item.getAttribute('data-section') === current) {
|
|||
|
|
item.classList.add('active');
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Timeline Navigation - Click to Scroll
|
|||
|
|
timelineItems.forEach((item) => {
|
|||
|
|
item.addEventListener('click', () => {
|
|||
|
|
const sectionId = item.getAttribute('data-section');
|
|||
|
|
const section = document.getElementById(sectionId);
|
|||
|
|
|
|||
|
|
gsap.to(window, {
|
|||
|
|
duration: 1.2,
|
|||
|
|
scrollTo: {
|
|||
|
|
y: section,
|
|||
|
|
offsetY: 0
|
|||
|
|
},
|
|||
|
|
ease: 'power3.inOut'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Scroll Indicator Click
|
|||
|
|
document.querySelector('.scroll-indicator').addEventListener('click', () => {
|
|||
|
|
gsap.to(window, {
|
|||
|
|
duration: 1.2,
|
|||
|
|
scrollTo: '#market',
|
|||
|
|
ease: 'power3.inOut'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Number Counter Animation for Stats
|
|||
|
|
const statValues = document.querySelectorAll('.stat-value');
|
|||
|
|
statValues.forEach((stat) => {
|
|||
|
|
const text = stat.textContent;
|
|||
|
|
const match = text.match(/[\d.]+/);
|
|||
|
|
|
|||
|
|
if (match) {
|
|||
|
|
const num = parseFloat(match[0]);
|
|||
|
|
const suffix = text.replace(match[0], '');
|
|||
|
|
|
|||
|
|
ScrollTrigger.create({
|
|||
|
|
trigger: stat,
|
|||
|
|
start: 'top 80%',
|
|||
|
|
onEnter: () => {
|
|||
|
|
gsap.from({ value: 0 }, {
|
|||
|
|
value: num,
|
|||
|
|
duration: 2,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
onUpdate: function() {
|
|||
|
|
stat.textContent = this.targets()[0].value.toFixed(text.includes('.') ? 1 : 0) + suffix;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
once: true
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Card Hover Effect Enhancement
|
|||
|
|
document.querySelectorAll('.card').forEach(card => {
|
|||
|
|
card.addEventListener('mouseenter', function() {
|
|||
|
|
gsap.to(this, {
|
|||
|
|
y: -8,
|
|||
|
|
scale: 1.02,
|
|||
|
|
duration: 0.4,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
card.addEventListener('mouseleave', function() {
|
|||
|
|
gsap.to(this, {
|
|||
|
|
y: 0,
|
|||
|
|
scale: 1,
|
|||
|
|
duration: 0.4,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|