1768 lines
87 KiB
HTML
1768 lines
87 KiB
HTML
|
<!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>
|
|||
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|||
|
|
<script src="https://unpkg.com/lucide@latest/dist/umd/lucide.min.js"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
|
|||
|
|
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>
|
|||
|
|
<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">
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
:root {
|
|||
|
|
--primary: #4CAF50;
|
|||
|
|
--primary-light: #81C784;
|
|||
|
|
--primary-dark: #388E3C;
|
|||
|
|
--accent: #FF9800;
|
|||
|
|
--accent-light: #FFB74D;
|
|||
|
|
--background: #FAFAFA;
|
|||
|
|
--surface: #FFFFFF;
|
|||
|
|
--text-primary: #1A1A1A;
|
|||
|
|
--text-secondary: #666666;
|
|||
|
|
--border: #E0E0E0;
|
|||
|
|
|
|||
|
|
/* 阴影系统 */
|
|||
|
|
--shadow-sm: 0 2px 8px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
|
|||
|
|
--shadow-md: 0 4px 16px rgba(0,0,0,0.06), 0 2px 4px rgba(0,0,0,0.08);
|
|||
|
|
--shadow-lg: 0 8px 24px rgba(0,0,0,0.08), 0 4px 8px rgba(0,0,0,0.10);
|
|||
|
|
--shadow-xl: 0 16px 48px rgba(0,0,0,0.10), 0 8px 16px rgba(0,0,0,0.12);
|
|||
|
|
--shadow-2xl: 0 24px 64px rgba(0,0,0,0.12), 0 12px 24px rgba(0,0,0,0.14);
|
|||
|
|
|
|||
|
|
/* 圆角系统 */
|
|||
|
|
--radius-sm: 8px;
|
|||
|
|
--radius-md: 12px;
|
|||
|
|
--radius-lg: 16px;
|
|||
|
|
--radius-xl: 20px;
|
|||
|
|
--radius-2xl: 24px;
|
|||
|
|
--radius-full: 9999px;
|
|||
|
|
|
|||
|
|
/* 响应式间距 */
|
|||
|
|
--spacing-xs: 0.5rem;
|
|||
|
|
--spacing-sm: 1rem;
|
|||
|
|
--spacing-md: 1.5rem;
|
|||
|
|
--spacing-lg: 2rem;
|
|||
|
|
--spacing-xl: 3rem;
|
|||
|
|
--spacing-2xl: 4rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 移动端优化变量 */
|
|||
|
|
@media (max-width: 768px) {
|
|||
|
|
:root {
|
|||
|
|
--spacing-sm: 0.75rem;
|
|||
|
|
--spacing-md: 1rem;
|
|||
|
|
--spacing-lg: 1.5rem;
|
|||
|
|
--spacing-xl: 2rem;
|
|||
|
|
--spacing-2xl: 2.5rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
* {
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
font-family: 'Inter', 'Noto Sans SC', sans-serif !important;
|
|||
|
|
background: var(--background) !important;
|
|||
|
|
color: var(--text-primary) !important;
|
|||
|
|
line-height: 1.6 !important;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Hero Section - 响应式优化 */
|
|||
|
|
.hero {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
height: auto;
|
|||
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
padding: var(--spacing-xl) var(--spacing-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 多层背景纹理 */
|
|||
|
|
.hero::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
width: 200%;
|
|||
|
|
height: 200%;
|
|||
|
|
background-image:
|
|||
|
|
radial-gradient(circle at 20% 50%, rgba(255,255,255,0.08) 0%, transparent 50%),
|
|||
|
|
radial-gradient(circle at 80% 80%, rgba(255,255,255,0.06) 0%, transparent 50%),
|
|||
|
|
url('data:image/svg+xml,<svg width="60" height="60" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="60" height="60" patternUnits="userSpaceOnUse"><path d="M 60 0 L 0 0 0 60" fill="none" stroke="rgba(255,255,255,0.08)" stroke-width="1"/></pattern></defs><rect width="60" height="60" fill="url(%23grid)"/></svg>');
|
|||
|
|
animation: drift 30s linear infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: -50%;
|
|||
|
|
left: -50%;
|
|||
|
|
width: 200%;
|
|||
|
|
height: 200%;
|
|||
|
|
background: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px);
|
|||
|
|
background-size: 40px 40px;
|
|||
|
|
opacity: 0.5;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes drift {
|
|||
|
|
0% { transform: translate(0, 0) rotate(0deg); }
|
|||
|
|
100% { transform: translate(-50%, -50%) rotate(5deg); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-content {
|
|||
|
|
text-align: center;
|
|||
|
|
color: white;
|
|||
|
|
z-index: 1;
|
|||
|
|
position: relative;
|
|||
|
|
max-width: 1200px;
|
|||
|
|
width: 100%;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 响应式标题 */
|
|||
|
|
.hero-title {
|
|||
|
|
font-size: clamp(2.5rem, 8vw, 5rem);
|
|||
|
|
font-weight: 900;
|
|||
|
|
margin-bottom: 1rem;
|
|||
|
|
text-shadow: 0 10px 40px rgba(0,0,0,0.4), 0 20px 80px rgba(0,0,0,0.2);
|
|||
|
|
letter-spacing: -2px;
|
|||
|
|
background: linear-gradient(to bottom, #ffffff 0%, rgba(255,255,255,0.9) 100%);
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
background-clip: text;
|
|||
|
|
line-height: 1.1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-tagline {
|
|||
|
|
font-size: clamp(0.875rem, 2.5vw, 1.25rem);
|
|||
|
|
font-weight: 400;
|
|||
|
|
margin-bottom: 0.5rem;
|
|||
|
|
opacity: 0.95;
|
|||
|
|
letter-spacing: clamp(2px, 1.5vw, 10px);
|
|||
|
|
text-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-subtitle {
|
|||
|
|
font-size: clamp(1rem, 3vw, 1.75rem);
|
|||
|
|
font-weight: 300;
|
|||
|
|
margin-bottom: var(--spacing-xl);
|
|||
|
|
opacity: 0.95;
|
|||
|
|
text-shadow: 0 4px 12px rgba(0,0,0,0.2);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.hero-badge {
|
|||
|
|
display: inline-block;
|
|||
|
|
background: rgba(255,255,255,0.15);
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
-webkit-backdrop-filter: blur(20px);
|
|||
|
|
padding: clamp(0.5rem, 2vw, 0.75rem) clamp(1rem, 4vw, 2rem);
|
|||
|
|
border-radius: var(--radius-full);
|
|||
|
|
font-size: clamp(0.875rem, 2vw, 1rem);
|
|||
|
|
font-weight: 600;
|
|||
|
|
border: 2px solid rgba(255,255,255,0.25);
|
|||
|
|
box-shadow: 0 8px 32px rgba(0,0,0,0.2), inset 0 1px 0 rgba(255,255,255,0.3);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (hover: hover) {
|
|||
|
|
.hero-badge:hover {
|
|||
|
|
transform: translateY(-2px);
|
|||
|
|
box-shadow: 0 12px 40px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.3);
|
|||
|
|
background: rgba(255,255,255,0.2);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 时间轴导航 - 移动端优化 */
|
|||
|
|
.timeline-nav {
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
background: rgba(255,255,255,0.95);
|
|||
|
|
backdrop-filter: blur(20px);
|
|||
|
|
-webkit-backdrop-filter: blur(20px);
|
|||
|
|
z-index: 100;
|
|||
|
|
padding: var(--spacing-md) 0;
|
|||
|
|
box-shadow: var(--shadow-md);
|
|||
|
|
overflow-x: auto;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-nav::-webkit-scrollbar {
|
|||
|
|
height: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-nav::-webkit-scrollbar-track {
|
|||
|
|
background: #f1f1f1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-nav::-webkit-scrollbar-thumb {
|
|||
|
|
background: var(--primary);
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-container {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: flex-start;
|
|||
|
|
position: relative;
|
|||
|
|
padding: 0 var(--spacing-md);
|
|||
|
|
min-width: max-content;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 1024px) {
|
|||
|
|
.timeline-container {
|
|||
|
|
justify-content: center;
|
|||
|
|
min-width: auto;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-item {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
min-width: 80px;
|
|||
|
|
padding: 0 var(--spacing-xs);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-dot {
|
|||
|
|
width: clamp(12px, 3vw, 16px);
|
|||
|
|
height: clamp(12px, 3vw, 16px);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: #ddd;
|
|||
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
position: relative;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-dot.active {
|
|||
|
|
background: var(--primary);
|
|||
|
|
box-shadow: 0 0 0 clamp(6px, 1.5vw, 8px) rgba(76, 175, 80, 0.2),
|
|||
|
|
0 8px 24px rgba(76, 175, 80, 0.4);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-dot.active::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 50%;
|
|||
|
|
left: 50%;
|
|||
|
|
transform: translate(-50%, -50%);
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
border-radius: 50%;
|
|||
|
|
background: var(--primary);
|
|||
|
|
animation: pulse 2s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes pulse {
|
|||
|
|
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.5; }
|
|||
|
|
50% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-label {
|
|||
|
|
font-size: clamp(0.75rem, 2vw, 0.875rem);
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
margin-top: var(--spacing-xs);
|
|||
|
|
text-align: center;
|
|||
|
|
white-space: nowrap;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-item.active .timeline-label {
|
|||
|
|
color: var(--primary);
|
|||
|
|
font-weight: 600;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-line {
|
|||
|
|
position: absolute;
|
|||
|
|
height: 2px;
|
|||
|
|
background: linear-gradient(90deg, #ddd 0%, var(--primary) 50%, #ddd 100%);
|
|||
|
|
top: clamp(6px, 1.5vw, 8px);
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
z-index: -1;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Container - 响应式间距 */
|
|||
|
|
.container {
|
|||
|
|
max-width: 1200px;
|
|||
|
|
margin: 0 auto;
|
|||
|
|
padding: 0 var(--spacing-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 640px) {
|
|||
|
|
.container {
|
|||
|
|
padding: 0 var(--spacing-lg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 1024px) {
|
|||
|
|
.container {
|
|||
|
|
padding: 0 var(--spacing-xl);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Section - 响应式间距 */
|
|||
|
|
.section {
|
|||
|
|
padding: var(--spacing-2xl) 0;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 768px) {
|
|||
|
|
.section {
|
|||
|
|
padding: clamp(4rem, 8vw, 6rem) 0;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title {
|
|||
|
|
font-size: clamp(1.75rem, 5vw, 2.5rem);
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-bottom: var(--spacing-md);
|
|||
|
|
color: var(--text-primary);
|
|||
|
|
position: relative;
|
|||
|
|
padding-bottom: var(--spacing-sm);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.section-title::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: clamp(60px, 15vw, 80px);
|
|||
|
|
height: 4px;
|
|||
|
|
background: linear-gradient(90deg, var(--primary), var(--accent));
|
|||
|
|
border-radius: 2px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Agent Badge - 移动端优化 */
|
|||
|
|
.agent-badge {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: var(--spacing-xs);
|
|||
|
|
background: rgba(76, 175, 80, 0.1);
|
|||
|
|
padding: clamp(0.5rem, 2vw, 0.75rem) clamp(0.75rem, 3vw, 1.25rem);
|
|||
|
|
border-radius: var(--radius-full);
|
|||
|
|
margin-bottom: var(--spacing-md);
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: clamp(0.875rem, 2vw, 1rem);
|
|||
|
|
border: 2px solid rgba(76, 175, 80, 0.2);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agent-icon {
|
|||
|
|
width: clamp(32px, 8vw, 40px);
|
|||
|
|
height: clamp(32px, 8vw, 40px);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
box-shadow: var(--shadow-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Card - 移动端优化 */
|
|||
|
|
.card {
|
|||
|
|
background: var(--surface);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
box-shadow: var(--shadow-md);
|
|||
|
|
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 768px) {
|
|||
|
|
.card {
|
|||
|
|
padding: var(--spacing-xl);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card::before {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
width: 100%;
|
|||
|
|
height: 4px;
|
|||
|
|
background: linear-gradient(90deg, var(--primary), var(--accent));
|
|||
|
|
transform: scaleX(0);
|
|||
|
|
transform-origin: left;
|
|||
|
|
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 20px;
|
|||
|
|
right: 20px;
|
|||
|
|
width: clamp(60px, 15vw, 80px);
|
|||
|
|
height: clamp(60px, 15vw, 80px);
|
|||
|
|
background: radial-gradient(circle, rgba(76, 175, 80, 0.08), transparent 70%);
|
|||
|
|
border-radius: 50%;
|
|||
|
|
opacity: 0;
|
|||
|
|
transition: opacity 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (hover: hover) {
|
|||
|
|
.card:hover {
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
box-shadow: var(--shadow-xl);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card:hover::before {
|
|||
|
|
transform: scaleX(1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.card:hover::after {
|
|||
|
|
opacity: 1;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Grid - 响应式布局 */
|
|||
|
|
.grid {
|
|||
|
|
display: grid;
|
|||
|
|
gap: var(--spacing-md);
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 640px) {
|
|||
|
|
.grid {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: var(--spacing-lg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 1024px) {
|
|||
|
|
.grid {
|
|||
|
|
grid-template-columns: repeat(3, 1fr);
|
|||
|
|
gap: var(--spacing-xl);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.grid-2 {
|
|||
|
|
display: grid;
|
|||
|
|
gap: var(--spacing-md);
|
|||
|
|
grid-template-columns: 1fr;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (min-width: 768px) {
|
|||
|
|
.grid-2 {
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
gap: var(--spacing-lg);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Info Box - 移动端优化 */
|
|||
|
|
.info-box {
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
margin-bottom: var(--spacing-lg);
|
|||
|
|
backdrop-filter: blur(10px);
|
|||
|
|
-webkit-backdrop-filter: blur(10px);
|
|||
|
|
border: 1px solid rgba(255,255,255,0.2);
|
|||
|
|
box-shadow: var(--shadow-lg);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box h3 {
|
|||
|
|
font-size: clamp(1.125rem, 3vw, 1.5rem);
|
|||
|
|
font-weight: 700;
|
|||
|
|
margin-bottom: var(--spacing-sm);
|
|||
|
|
color: white;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.info-box p {
|
|||
|
|
font-size: clamp(0.875rem, 2vw, 1rem);
|
|||
|
|
line-height: 1.8;
|
|||
|
|
color: rgba(255,255,255,0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Image - 响应式优化 */
|
|||
|
|
.image-container {
|
|||
|
|
position: relative;
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin-bottom: var(--spacing-md);
|
|||
|
|
box-shadow: var(--shadow-lg);
|
|||
|
|
aspect-ratio: 16/9;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-container img {
|
|||
|
|
width: 100%;
|
|||
|
|
height: 100%;
|
|||
|
|
object-fit: cover;
|
|||
|
|
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (hover: hover) {
|
|||
|
|
.image-container:hover img {
|
|||
|
|
transform: scale(1.05);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-caption {
|
|||
|
|
position: absolute;
|
|||
|
|
bottom: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
|
|||
|
|
color: white;
|
|||
|
|
padding: var(--spacing-md);
|
|||
|
|
font-size: clamp(0.875rem, 2vw, 1rem);
|
|||
|
|
font-weight: 500;
|
|||
|
|
transform: translateY(100%);
|
|||
|
|
transition: transform 0.4s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.image-container:hover .image-caption {
|
|||
|
|
transform: translateY(0);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Table - 移动端优化 */
|
|||
|
|
.table-container {
|
|||
|
|
overflow-x: auto;
|
|||
|
|
-webkit-overflow-scrolling: touch;
|
|||
|
|
margin: var(--spacing-lg) 0;
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
box-shadow: var(--shadow-md);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
table {
|
|||
|
|
width: 100%;
|
|||
|
|
min-width: 600px;
|
|||
|
|
border-collapse: collapse;
|
|||
|
|
background: var(--surface);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th, td {
|
|||
|
|
padding: clamp(0.75rem, 2vw, 1rem);
|
|||
|
|
text-align: left;
|
|||
|
|
border-bottom: 1px solid var(--border);
|
|||
|
|
font-size: clamp(0.875rem, 2vw, 1rem);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
th {
|
|||
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
|||
|
|
color: white;
|
|||
|
|
font-weight: 600;
|
|||
|
|
position: sticky;
|
|||
|
|
top: 0;
|
|||
|
|
z-index: 10;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
tr:hover {
|
|||
|
|
background: rgba(76, 175, 80, 0.05);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Progress Bar - 移动端优化 */
|
|||
|
|
.progress-bar {
|
|||
|
|
background: rgba(76, 175, 80, 0.1);
|
|||
|
|
height: clamp(8px, 2vw, 10px);
|
|||
|
|
border-radius: var(--radius-full);
|
|||
|
|
overflow: hidden;
|
|||
|
|
margin: var(--spacing-sm) 0;
|
|||
|
|
position: relative;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-fill {
|
|||
|
|
height: 100%;
|
|||
|
|
background: linear-gradient(90deg, var(--primary), var(--primary-light));
|
|||
|
|
border-radius: var(--radius-full);
|
|||
|
|
transition: width 1s cubic-bezier(0.4, 0, 0.2, 1);
|
|||
|
|
position: relative;
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.progress-fill::after {
|
|||
|
|
content: '';
|
|||
|
|
position: absolute;
|
|||
|
|
top: 0;
|
|||
|
|
left: 0;
|
|||
|
|
right: 0;
|
|||
|
|
bottom: 0;
|
|||
|
|
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
|
|||
|
|
animation: shimmer 2s infinite;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@keyframes shimmer {
|
|||
|
|
0% { transform: translateX(-100%); }
|
|||
|
|
100% { transform: translateX(100%); }
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Stats - 响应式优化 */
|
|||
|
|
.stat-card {
|
|||
|
|
text-align: center;
|
|||
|
|
padding: var(--spacing-lg);
|
|||
|
|
background: var(--surface);
|
|||
|
|
border-radius: var(--radius-lg);
|
|||
|
|
box-shadow: var(--shadow-md);
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
@media (hover: hover) {
|
|||
|
|
.stat-card:hover {
|
|||
|
|
transform: translateY(-4px);
|
|||
|
|
box-shadow: var(--shadow-xl);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-number {
|
|||
|
|
font-size: clamp(2rem, 6vw, 3rem);
|
|||
|
|
font-weight: 800;
|
|||
|
|
background: linear-gradient(135deg, var(--primary), var(--primary-dark));
|
|||
|
|
-webkit-background-clip: text;
|
|||
|
|
-webkit-text-fill-color: transparent;
|
|||
|
|
background-clip: text;
|
|||
|
|
margin-bottom: var(--spacing-xs);
|
|||
|
|
line-height: 1.2;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-label {
|
|||
|
|
font-size: clamp(0.875rem, 2vw, 1rem);
|
|||
|
|
color: var(--text-secondary);
|
|||
|
|
font-weight: 500;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 背景图案 - 性能优化 */
|
|||
|
|
.bg-pattern-1 {
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%),
|
|||
|
|
radial-gradient(circle at 10% 20%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
|||
|
|
radial-gradient(circle at 90% 80%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-pattern-2 {
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%),
|
|||
|
|
radial-gradient(circle at 15% 30%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
|||
|
|
radial-gradient(circle at 85% 70%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-pattern-3 {
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%),
|
|||
|
|
radial-gradient(circle at 20% 40%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
|||
|
|
radial-gradient(circle at 80% 60%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-pattern-4 {
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(135deg, #ffeaa7 0%, #fdcb6e 100%),
|
|||
|
|
radial-gradient(circle at 25% 50%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
|||
|
|
radial-gradient(circle at 75% 50%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-pattern-5 {
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%),
|
|||
|
|
radial-gradient(circle at 30% 60%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
|||
|
|
radial-gradient(circle at 70% 40%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-pattern-6 {
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(135deg, #f093fb 0%, #f5576c 100%),
|
|||
|
|
radial-gradient(circle at 35% 70%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
|||
|
|
radial-gradient(circle at 65% 30%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.bg-pattern-7 {
|
|||
|
|
background-image:
|
|||
|
|
linear-gradient(135deg, #4facfe 0%, #00f2fe 100%),
|
|||
|
|
radial-gradient(circle at 40% 80%, rgba(255,255,255,0.4) 0%, transparent 40%),
|
|||
|
|
radial-gradient(circle at 60% 20%, rgba(255,255,255,0.3) 0%, transparent 40%);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 触摸优化 */
|
|||
|
|
@media (hover: none) {
|
|||
|
|
.card:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.timeline-item:active .timeline-dot {
|
|||
|
|
transform: scale(0.95);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.stat-card:active {
|
|||
|
|
transform: scale(0.98);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 图标渐变 */
|
|||
|
|
.icon-market { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
|
|||
|
|
.icon-brand { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
|
|||
|
|
.icon-location { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
|
|||
|
|
.icon-menu { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
|
|||
|
|
.icon-operation { background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); }
|
|||
|
|
.icon-team { background: linear-gradient(135deg, #30cfd0 0%, #330867 100%); }
|
|||
|
|
.icon-finance { background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%); }
|
|||
|
|
|
|||
|
|
/* 加载动画 */
|
|||
|
|
@keyframes rotate {
|
|||
|
|
from { transform: rotate(0deg); }
|
|||
|
|
to { transform: rotate(360deg); }
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<!-- Hero Section -->
|
|||
|
|
<section class="hero" id="hero">
|
|||
|
|
<div class="hero-content">
|
|||
|
|
<div class="hero-tagline">AI 多智能体协同</div>
|
|||
|
|
<h1 class="hero-title">青莳轻食</h1>
|
|||
|
|
<p class="hero-subtitle">中高端个性化轻食店铺经营方案</p>
|
|||
|
|
<div class="hero-badge">🤖 由 7 位 AI 专家联合打造</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Timeline Navigation -->
|
|||
|
|
<nav class="timeline-nav" id="timeline-nav">
|
|||
|
|
<div class="timeline-container">
|
|||
|
|
<div class="timeline-line"></div>
|
|||
|
|
<div class="timeline-item active" data-section="market">
|
|||
|
|
<div class="timeline-dot active"></div>
|
|||
|
|
<span class="timeline-label">📊 市场</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="brand">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<span class="timeline-label">🎨 品牌</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="location">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<span class="timeline-label">📍 选址</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="menu">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<span class="timeline-label">🍽️ 菜单</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="operation">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<span class="timeline-label">⚙️ 运营</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="team">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<span class="timeline-label">👥 团队</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="timeline-item" data-section="finance">
|
|||
|
|
<div class="timeline-dot"></div>
|
|||
|
|
<span class="timeline-label">💰 财务</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<!-- Section 1: Market Analysis -->
|
|||
|
|
<section class="section bg-pattern-1" id="market">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="agent-badge icon-market" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-market">
|
|||
|
|
<i data-lucide="line-chart" style="width: 20px; height: 20px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 01 · 餐饮市场调研专家</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">市场分析与定位</h2>
|
|||
|
|
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(102, 126, 234, 0.9), rgba(118, 75, 162, 0.9));">
|
|||
|
|
<h3>📊 专家分析报告</h3>
|
|||
|
|
<p>基于2025年餐饮市场数据,轻食赛道呈现持续增长态势。健康意识觉醒、中产阶级崛起、快节奏生活方式共同驱动市场需求。本方案针对25-40岁中高收入人群,主攻商务办公区与高端社区,提供高品质、个性化的轻食解决方案。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">🎯 目标客群</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/健身宣传代言.jpg" alt="目标客群">
|
|||
|
|
<div class="image-caption">健康生活方式倡导者</div>
|
|||
|
|
</div>
|
|||
|
|
<ul style="list-style: none; padding: 0;">
|
|||
|
|
<li style="padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--border); font-size: clamp(0.875rem, 2vw, 1rem);">✓ 年龄段: 25-40 岁</li>
|
|||
|
|
<li style="padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--border); font-size: clamp(0.875rem, 2vw, 1rem);">✓ 收入: 月收入 8000-30000 元</li>
|
|||
|
|
<li style="padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--border); font-size: clamp(0.875rem, 2vw, 1rem);">✓ 职业: 白领、健身爱好者、孕产群体</li>
|
|||
|
|
<li style="padding: var(--spacing-xs) 0; font-size: clamp(0.875rem, 2vw, 1rem);">✓ 特征: 健康意识强、追求品质生活</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">📈 市场趋势</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/市场宣传营销.jpg" alt="市场趋势">
|
|||
|
|
<div class="image-caption">2025年轻食市场规模持续增长</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: var(--spacing-md);">
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>市场规模增长</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">15%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 75%;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>健康意识提升</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">20%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 80%;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>外卖渗透率</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">65%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 65%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">🎪 竞争分析</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/店面装修.jpg" alt="竞争环境">
|
|||
|
|
<div class="image-caption">差异化竞争策略</div>
|
|||
|
|
</div>
|
|||
|
|
<p style="color: var(--text-secondary); line-height: 1.8; font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
当前市场中低端轻食品牌众多,但缺乏真正的高端品牌。青莳定位中高端市场,以优质食材、个性化服务、专业营养指导为差异化竞争优势,避开红海竞争,开拓蓝海市场。
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 2: Brand Design -->
|
|||
|
|
<section class="section bg-pattern-2" id="brand">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="agent-badge icon-brand" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-brand">
|
|||
|
|
<i data-lucide="palette" style="width: 20px; height: 20px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 02 · 品牌设计专家</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">品牌定位与形象设计</h2>
|
|||
|
|
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(240, 147, 251, 0.9), rgba(245, 87, 108, 0.9));">
|
|||
|
|
<h3>🎨 专家设计理念</h3>
|
|||
|
|
<p>"青莳"取"青春"与"莳种"之意,象征新鲜、健康与生命力。品牌视觉采用清新绿色系,传递自然、健康、活力的品牌形象。Logo以简洁的叶片元素为核心,搭配现代字体,体现专业与品质。整体设计语言贯穿门店、包装、线上平台,形成统一的品牌识别系统。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-2">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">🏷️ 品牌核心</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/品牌LOGO.jpg" alt="品牌LOGO">
|
|||
|
|
<div class="image-caption">青莳轻食品牌标识</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: var(--spacing-md);">
|
|||
|
|
<div style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<div style="font-weight: 600; margin-bottom: var(--spacing-xs); font-size: clamp(1rem, 2.5vw, 1.125rem);">品牌名称</div>
|
|||
|
|
<p style="color: var(--text-secondary); font-size: clamp(0.875rem, 2vw, 1rem);">青莳 Fresh & Light</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<div style="font-weight: 600; margin-bottom: var(--spacing-xs); font-size: clamp(1rem, 2.5vw, 1.125rem);">品牌理念</div>
|
|||
|
|
<p style="color: var(--text-secondary); font-size: clamp(0.875rem, 2vw, 1rem);">新鲜食材 · 轻盈生活 · 专业营养</p>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: var(--spacing-xs); font-size: clamp(1rem, 2.5vw, 1.125rem);">品牌色彩</div>
|
|||
|
|
<div style="display: flex; gap: var(--spacing-xs); flex-wrap: wrap;">
|
|||
|
|
<div style="width: clamp(40px, 10vw, 60px); height: clamp(40px, 10vw, 60px); background: #4CAF50; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);"></div>
|
|||
|
|
<div style="width: clamp(40px, 10vw, 60px); height: clamp(40px, 10vw, 60px); background: #81C784; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);"></div>
|
|||
|
|
<div style="width: clamp(40px, 10vw, 60px); height: clamp(40px, 10vw, 60px); background: #FF9800; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);"></div>
|
|||
|
|
<div style="width: clamp(40px, 10vw, 60px); height: clamp(40px, 10vw, 60px); background: #FFFFFF; border: 2px solid #E0E0E0; border-radius: var(--radius-sm); box-shadow: var(--shadow-sm);"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">🏪 店面形象</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/店面图片_正门.jpg" alt="店面外观">
|
|||
|
|
<div class="image-caption">现代简约风格门店设计</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/店内场景_用餐区.jpg" alt="店内环境">
|
|||
|
|
<div class="image-caption">清新舒适的用餐环境</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 3: Location Selection -->
|
|||
|
|
<section class="section bg-pattern-3" id="location">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="agent-badge icon-location" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-location">
|
|||
|
|
<i data-lucide="map-pin" style="width: 20px; height: 20px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 03 · 商业选址专家</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">店铺选址与布局规划</h2>
|
|||
|
|
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(79, 172, 254, 0.9), rgba(0, 242, 254, 0.9));">
|
|||
|
|
<h3>📍 专家选址建议</h3>
|
|||
|
|
<p>基于目标客群画像与消费行为分析,推荐选址于甲级写字楼、高端商圈、品质社区三大核心场景。面积控制在80-150㎡,既能保证堂食体验,又能高效运营外卖业务。店内采用开放式厨房设计,透明化操作流程,增强顾客信任感。动线设计遵循"点餐-制作-取餐"流程,提升运营效率。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">🎯 选址标准</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/健康食材扫码溯源.jpg" alt="商圈选址">
|
|||
|
|
<div class="image-caption">核心商圈优质点位</div>
|
|||
|
|
</div>
|
|||
|
|
<ul style="list-style: none; padding: 0;">
|
|||
|
|
<li style="padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--border); font-size: clamp(0.875rem, 2vw, 1rem);">✓ 甲级写字楼 1 层或地下美食街</li>
|
|||
|
|
<li style="padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--border); font-size: clamp(0.875rem, 2vw, 1rem);">✓ 高端商圈核心位置</li>
|
|||
|
|
<li style="padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--border); font-size: clamp(0.875rem, 2vw, 1rem);">✓ 品质社区沿街商铺</li>
|
|||
|
|
<li style="padding: var(--spacing-xs) 0; border-bottom: 1px solid var(--border); font-size: clamp(0.875rem, 2vw, 1rem);">✓ 日均人流量 ≥ 3000 人</li>
|
|||
|
|
<li style="padding: var(--spacing-xs) 0; font-size: clamp(0.875rem, 2vw, 1rem);">✓ 门面宽度 ≥ 6 米</li>
|
|||
|
|
</ul>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">📐 空间布局</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/厨房加工场景.jpg" alt="厨房布局">
|
|||
|
|
<div class="image-caption">开放式厨房设计</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: var(--spacing-md);">
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>前厅用餐区</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">40%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 40%;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>开放式厨房</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">35%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 35%;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>冷藏仓储</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">15%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 15%;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>辅助功能区</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">10%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 10%;"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">⚡ 运营效率</h3>
|
|||
|
|
<div class="stat-card" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<div class="stat-number">5分钟</div>
|
|||
|
|
<div class="stat-label">平均出餐时间</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<div class="stat-number">20单/小时</div>
|
|||
|
|
<div class="stat-label">高峰时段产能</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-number">95%+</div>
|
|||
|
|
<div class="stat-label">顾客满意度</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 4: Menu Design -->
|
|||
|
|
<section class="section bg-pattern-4" id="menu">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="agent-badge icon-menu" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-menu">
|
|||
|
|
<i data-lucide="utensils" style="width: 20px; height: 20px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 04 · 营养菜单设计师</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">产品菜单与营养设计</h2>
|
|||
|
|
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(67, 233, 123, 0.9), rgba(56, 249, 215, 0.9));">
|
|||
|
|
<h3>🍽️ 专家设计方案</h3>
|
|||
|
|
<p>菜单设计遵循"营养均衡、健康低卡、口味丰富"三大原则。产品线涵盖能量碗、沙拉、冷意面、健康饮品四大品类,满足不同场景与需求。每款产品均配有详细营养标签,标注卡路里、蛋白质、碳水、脂肪含量,并提供"减脂""增肌""均衡"等标签,便于顾客快速选择。同时提供DIY定制服务,满足个性化需求。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-2">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">🥗 明星产品</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/青莳减脂专属套餐(可换酱汁).jpg" alt="减脂套餐">
|
|||
|
|
<div class="image-caption">青莳减脂专属套餐</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="background: rgba(76, 175, 80, 0.1); padding: var(--spacing-md); border-radius: var(--radius-md); margin-top: var(--spacing-md);">
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span style="font-weight: 600;">卡路里</span>
|
|||
|
|
<span style="color: var(--primary); font-weight: 700;">450 kcal</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span style="font-weight: 600;">蛋白质</span>
|
|||
|
|
<span style="color: var(--primary); font-weight: 700;">35g</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span style="font-weight: 600;">碳水化合物</span>
|
|||
|
|
<span style="color: var(--primary); font-weight: 700;">45g</span>
|
|||
|
|
</div>
|
|||
|
|
<div style="display: flex; justify-content: space-between; font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span style="font-weight: 600;">脂肪</span>
|
|||
|
|
<span style="color: var(--primary); font-weight: 700;">12g</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">🥙 产品系列</h3>
|
|||
|
|
|
|||
|
|
<div class="image-container" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<img src="images/青莳虾仁牛油果沙拉.jpg" alt="虾仁牛油果沙拉">
|
|||
|
|
<div class="image-caption">青莳虾仁牛油果沙拉</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid" style="grid-template-columns: 1fr;">
|
|||
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: rgba(76, 175, 80, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div style="width: clamp(40px, 10vw, 50px); height: clamp(40px, 10vw, 50px); border-radius: 50%; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
|||
|
|
<i data-lucide="salad" style="width: clamp(20px, 5vw, 24px); height: clamp(20px, 5vw, 24px); color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">能量碗系列</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">8款 · 价格 35-55 元</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: rgba(255, 152, 0, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div style="width: clamp(40px, 10vw, 50px); height: clamp(40px, 10vw, 50px); border-radius: 50%; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
|||
|
|
<i data-lucide="leaf" style="width: clamp(20px, 5vw, 24px); height: clamp(20px, 5vw, 24px); color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">沙拉系列</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">6款 · 价格 28-48 元</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: rgba(79, 172, 254, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div style="width: clamp(40px, 10vw, 50px); height: clamp(40px, 10vw, 50px); border-radius: 50%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
|||
|
|
<i data-lucide="pizza" style="width: clamp(20px, 5vw, 24px); height: clamp(20px, 5vw, 24px); color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">冷意面系列</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">5款 · 价格 32-52 元</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: rgba(240, 147, 251, 0.05); border-radius: var(--radius-md);">
|
|||
|
|
<div style="width: clamp(40px, 10vw, 50px); height: clamp(40px, 10vw, 50px); border-radius: 50%; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
|||
|
|
<i data-lucide="coffee" style="width: clamp(20px, 5vw, 24px); height: clamp(20px, 5vw, 24px); color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">健康饮品</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">10款 · 价格 15-35 元</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid" style="margin-top: var(--spacing-xl);">
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/青莳夏季芒果鸡胸冷意面.jpg" alt="芒果鸡胸冷意面">
|
|||
|
|
<div class="image-caption">青莳夏季芒果鸡胸冷意面</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/青莳香煎牛肉能量碗.jpg" alt="香煎牛肉能量碗">
|
|||
|
|
<div class="image-caption">青莳香煎牛肉能量碗</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/用餐拍摄场景.jpg" alt="用餐场景">
|
|||
|
|
<div class="image-caption">精致摆盘呈现</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 5: Operation Management -->
|
|||
|
|
<section class="section bg-pattern-5" id="operation">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="agent-badge icon-operation" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-operation">
|
|||
|
|
<i data-lucide="settings" style="width: 20px; height: 20px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 05 · 运营管理专家</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">运营管理与流程设计</h2>
|
|||
|
|
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(250, 112, 154, 0.9), rgba(254, 225, 64, 0.9));">
|
|||
|
|
<h3>⚙️ 专家运营方案</h3>
|
|||
|
|
<p>建立"标准化+数字化"双轮驱动的运营体系。标准化涵盖食材采购、储存、制作、出餐全流程,通过SOP确保品质稳定。数字化系统包括智能点餐、库存管理、会员系统、数据分析四大模块,实现精细化运营。同时建立7×24小时冷链物流体系,保证食材新鲜度。外卖平台与私域流量双管齐下,线上线下深度融合。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">📋 标准化流程</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/厨房冷柜管理.jpg" alt="标准化管理">
|
|||
|
|
<div class="image-caption">规范化食材管理</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: var(--spacing-md);">
|
|||
|
|
<div style="background: rgba(76, 175, 80, 0.05); padding: var(--spacing-md); border-radius: var(--radius-md); border-left: 4px solid var(--primary); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div style="font-weight: 600; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">1. 食材采购标准</div>
|
|||
|
|
<p style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">建立供应商白名单,定期质检,可溯源</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="background: rgba(255, 152, 0, 0.05); padding: var(--spacing-md); border-radius: var(--radius-md); border-left: 4px solid var(--accent); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div style="font-weight: 600; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">2. 储存管理规范</div>
|
|||
|
|
<p style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">分类储存,FIFO原则,温度监控</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="background: rgba(79, 172, 254, 0.05); padding: var(--spacing-md); border-radius: var(--radius-md); border-left: 4px solid #4facfe; margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div style="font-weight: 600; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">3. 制作标准流程</div>
|
|||
|
|
<p style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">图文SOP,计时操作,品质检查</p>
|
|||
|
|
</div>
|
|||
|
|
<div style="background: rgba(240, 147, 251, 0.05); padding: var(--spacing-md); border-radius: var(--radius-md); border-left: 4px solid #f093fb;">
|
|||
|
|
<div style="font-weight: 600; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">4. 出餐打包标准</div>
|
|||
|
|
<p style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">专业包装,温度保持,配送追踪</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">📱 数字化系统</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/员工着装以及切配规范.jpg" alt="数字化管理">
|
|||
|
|
<div class="image-caption">智能化运营系统</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: var(--spacing-md);">
|
|||
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: rgba(76, 175, 80, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div style="width: clamp(40px, 10vw, 50px); height: clamp(40px, 10vw, 50px); border-radius: 50%; background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
|||
|
|
<i data-lucide="smartphone" style="width: clamp(20px, 5vw, 24px); height: clamp(20px, 5vw, 24px); color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">智能点餐系统</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">小程序 + APP + 外卖平台</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: rgba(255, 152, 0, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div style="width: clamp(40px, 10vw, 50px); height: clamp(40px, 10vw, 50px); border-radius: 50%; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
|||
|
|
<i data-lucide="package" style="width: clamp(20px, 5vw, 24px); height: clamp(20px, 5vw, 24px); color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">库存管理系统</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">实时监控 + 智能预警</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: rgba(79, 172, 254, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div style="width: clamp(40px, 10vw, 50px); height: clamp(40px, 10vw, 50px); border-radius: 50%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
|||
|
|
<i data-lucide="users" style="width: clamp(20px, 5vw, 24px); height: clamp(20px, 5vw, 24px); color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">会员管理系统</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">积分 + 权益 + 精准营销</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; align-items: center; gap: var(--spacing-md); padding: var(--spacing-md); background: rgba(240, 147, 251, 0.05); border-radius: var(--radius-md);">
|
|||
|
|
<div style="width: clamp(40px, 10vw, 50px); height: clamp(40px, 10vw, 50px); border-radius: 50%; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); display: flex; align-items: center; justify-content: center; flex-shrink: 0;">
|
|||
|
|
<i data-lucide="bar-chart" style="width: clamp(20px, 5vw, 24px); height: clamp(20px, 5vw, 24px); color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">数据分析系统</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">销售 + 成本 + 用户画像</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">🔥 运营指标</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/餐盒包装.jpg" alt="品质管控">
|
|||
|
|
<div class="image-caption">品质管控体系</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="margin-top: var(--spacing-md);">
|
|||
|
|
<div class="stat-card" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<div class="stat-number">98%</div>
|
|||
|
|
<div class="stat-label">食材合格率</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<div class="stat-number">5分钟</div>
|
|||
|
|
<div class="stat-label">平均出餐时间</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-number">4.8/5.0</div>
|
|||
|
|
<div class="stat-label">顾客评分</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 6: Team Building -->
|
|||
|
|
<section class="section bg-pattern-6" id="team">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="agent-badge icon-team" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-team">
|
|||
|
|
<i data-lucide="users" style="width: 20px; height: 20px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 06 · 团队建设专家</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">团队架构与人才培养</h2>
|
|||
|
|
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(48, 207, 208, 0.9), rgba(51, 8, 103, 0.9));">
|
|||
|
|
<h3>👥 专家团队方案</h3>
|
|||
|
|
<p>建立"精简高效"的团队架构,单店配置8-12人。核心岗位包括店长、营养师、主厨、备餐师、收银员、配送员。店长负责整体运营,营养师提供专业咨询,主厨保证出品品质。建立完善的培训体系,新员工经过7天岗前培训+14天实操带教方能上岗。定期技能考核与服务评估,优胜劣汰,保持团队活力。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid-2">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">👨💼 团队架构</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/店长.jpg" alt="店长">
|
|||
|
|
<div class="image-caption">专业店长团队</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-top: var(--spacing-md);">
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: rgba(76, 175, 80, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">店长 × 1</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">全面运营管理</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: var(--primary);">6-8K</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: rgba(255, 152, 0, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">营养师 × 1</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">专业营养咨询</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: var(--accent);">5-7K</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: rgba(79, 172, 254, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">主厨 × 2</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">菜品制作与品控</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: #4facfe;">4-6K</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: rgba(240, 147, 251, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">备餐师 × 2</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">食材处理与备制</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: #f093fb;">3.5-5K</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: rgba(67, 233, 123, 0.05); border-radius: var(--radius-md); margin-bottom: var(--spacing-sm);">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">收银员 × 2</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">前台接待与收银</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: #43e97b;">3-4K</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; align-items: center; padding: var(--spacing-md); background: rgba(250, 112, 154, 0.05); border-radius: var(--radius-md);">
|
|||
|
|
<div>
|
|||
|
|
<div style="font-weight: 600; margin-bottom: 4px; font-size: clamp(0.875rem, 2vw, 1rem);">配送员 × 2</div>
|
|||
|
|
<div style="color: var(--text-secondary); font-size: clamp(0.75rem, 1.8vw, 0.875rem);">外卖配送服务</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: #fa709a;">3-5K</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">📚 培训体系</h3>
|
|||
|
|
|
|||
|
|
<div class="image-container" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<img src="images/厨师.jpg" alt="厨师团队">
|
|||
|
|
<div class="image-caption">专业厨师团队</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="image-container" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<img src="images/服务员.jpg" alt="服务团队">
|
|||
|
|
<div class="image-caption">优质服务团队</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/收银员.jpg" alt="收银团队">
|
|||
|
|
<div class="image-caption">专业收银团队</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<!-- Section 7: Financial Analysis -->
|
|||
|
|
<section class="section bg-pattern-7" id="finance">
|
|||
|
|
<div class="container">
|
|||
|
|
<div class="agent-badge icon-finance" style="color: white;">
|
|||
|
|
<div class="agent-icon icon-finance">
|
|||
|
|
<i data-lucide="dollar-sign" style="width: 20px; height: 20px; color: white;"></i>
|
|||
|
|
</div>
|
|||
|
|
<span class="agent-name">🤖 Agent 07 · 财务分析专家</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<h2 class="section-title">财务规划与投资回报</h2>
|
|||
|
|
|
|||
|
|
<div class="info-box" style="background: linear-gradient(135deg, rgba(168, 237, 234, 0.9), rgba(254, 214, 227, 0.9));">
|
|||
|
|
<h3>💰 专家财务分析</h3>
|
|||
|
|
<p>基于保守预估模型,单店初期投资约50万元,包括装修、设备、首批物料、营运资金。月度运营成本约15万元,涵盖租金、人力、食材、水电等。预计开业3个月后实现盈亏平衡,月营业额达20万元,月净利润4-6万元,ROI约12-15个月。第二年稳定期月营业额可达30万元,年净利润约80-100万元。财务模型经过多轮验证,风险可控。</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="grid">
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">💵 初期投资</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/食材备制.jpg" alt="食材投资">
|
|||
|
|
<div class="image-caption">优质食材采购</div>
|
|||
|
|
</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; font-weight: 600;">15</td>
|
|||
|
|
<td style="text-align: right; color: var(--primary); font-weight: 600;">30%</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>设备采购</td>
|
|||
|
|
<td style="text-align: right; font-weight: 600;">12</td>
|
|||
|
|
<td style="text-align: right; color: var(--primary); font-weight: 600;">24%</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>首批物料</td>
|
|||
|
|
<td style="text-align: right; font-weight: 600;">8</td>
|
|||
|
|
<td style="text-align: right; color: var(--primary); font-weight: 600;">16%</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>品牌推广</td>
|
|||
|
|
<td style="text-align: right; font-weight: 600;">5</td>
|
|||
|
|
<td style="text-align: right; color: var(--primary); font-weight: 600;">10%</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr>
|
|||
|
|
<td>营运资金</td>
|
|||
|
|
<td style="text-align: right; font-weight: 600;">10</td>
|
|||
|
|
<td style="text-align: right; color: var(--primary); font-weight: 600;">20%</td>
|
|||
|
|
</tr>
|
|||
|
|
<tr style="background: rgba(76, 175, 80, 0.1); font-weight: 700;">
|
|||
|
|
<td>合计</td>
|
|||
|
|
<td style="text-align: right; color: var(--primary);">50</td>
|
|||
|
|
<td style="text-align: right; color: var(--primary);">100%</td>
|
|||
|
|
</tr>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">📊 成本构成</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/烹饪场景.jpg" alt="运营成本">
|
|||
|
|
<div class="image-caption">精细化成本管控</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-top: var(--spacing-md);">
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>食材成本</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">35%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 35%;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>人力成本</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">25%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 25%;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>租金成本</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">20%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 20%;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span>其他成本</span>
|
|||
|
|
<span style="font-weight: 600; color: var(--primary);">10%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 10%;"></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="display: flex; justify-content: space-between; margin-bottom: var(--spacing-xs); margin-top: var(--spacing-md); font-size: clamp(0.875rem, 2vw, 1rem);">
|
|||
|
|
<span style="font-weight: 700;">净利润率</span>
|
|||
|
|
<span style="font-weight: 700; color: var(--primary); font-size: clamp(1rem, 2.5vw, 1.25rem);">20%</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="progress-bar">
|
|||
|
|
<div class="progress-fill" style="width: 20%; background: linear-gradient(90deg, #FFD700, #FFA500);"></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card">
|
|||
|
|
<h3 style="font-size: clamp(1.125rem, 3vw, 1.5rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary);">📈 盈利预测</h3>
|
|||
|
|
<div class="image-container">
|
|||
|
|
<img src="images/牛排烹饪.jpg" alt="盈利分析">
|
|||
|
|
<div class="image-caption">高品质产品带来高回报</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div style="margin-top: var(--spacing-md);">
|
|||
|
|
<div class="stat-card" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<div class="stat-number">20万</div>
|
|||
|
|
<div class="stat-label">月营业额(稳定期)</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-card" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<div class="stat-number">4-6万</div>
|
|||
|
|
<div class="stat-label">月净利润</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-card" style="margin-bottom: var(--spacing-md);">
|
|||
|
|
<div class="stat-number">12-15个月</div>
|
|||
|
|
<div class="stat-label">投资回收期</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="stat-card">
|
|||
|
|
<div class="stat-number">80-100万</div>
|
|||
|
|
<div class="stat-label">第二年净利润</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="card" style="margin-top: var(--spacing-xl); background: linear-gradient(135deg, rgba(76, 175, 80, 0.05), rgba(255, 152, 0, 0.05)); border: 2px solid var(--primary);">
|
|||
|
|
<h3 style="font-size: clamp(1.25rem, 3.5vw, 1.75rem); font-weight: 700; margin-bottom: var(--spacing-md); color: var(--primary); text-align: center;">💡 投资亮点总结</h3>
|
|||
|
|
<div class="grid-2">
|
|||
|
|
<div style="padding: var(--spacing-md); background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);">
|
|||
|
|
<div style="font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 800; color: var(--primary); margin-bottom: var(--spacing-xs); text-align: center;">5年+</div>
|
|||
|
|
<div style="text-align: center; color: var(--text-secondary); font-weight: 500; font-size: clamp(0.875rem, 2vw, 1rem);">行业经验团队</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="padding: var(--spacing-md); background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);">
|
|||
|
|
<div style="font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 800; color: var(--primary); margin-bottom: var(--spacing-xs); text-align: center;">≤15个月</div>
|
|||
|
|
<div style="text-align: center; color: var(--text-secondary); font-weight: 500; font-size: clamp(0.875rem, 2vw, 1rem);">快速回本周期</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="padding: var(--spacing-md); background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);">
|
|||
|
|
<div style="font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 800; color: var(--primary); margin-bottom: var(--spacing-xs); text-align: center;">20%</div>
|
|||
|
|
<div style="text-align: center; color: var(--text-secondary); font-weight: 500; font-size: clamp(0.875rem, 2vw, 1rem);">稳定净利润率</div>
|
|||
|
|
</div>
|
|||
|
|
<div style="padding: var(--spacing-md); background: white; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);">
|
|||
|
|
<div style="font-size: clamp(2rem, 5vw, 2.5rem); font-weight: 800; color: var(--primary); margin-bottom: var(--spacing-xs); text-align: center;">蓝海市场</div>
|
|||
|
|
<div style="text-align: center; color: var(--text-secondary); font-weight: 500; font-size: clamp(0.875rem, 2vw, 1rem);">中高端轻食赛道</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
// Initialize Lucide icons
|
|||
|
|
lucide.createIcons();
|
|||
|
|
|
|||
|
|
// Timeline Navigation with smooth scrolling
|
|||
|
|
const timelineItems = document.querySelectorAll('.timeline-item');
|
|||
|
|
const sections = document.querySelectorAll('.section');
|
|||
|
|
|
|||
|
|
timelineItems.forEach((item, index) => {
|
|||
|
|
item.addEventListener('click', () => {
|
|||
|
|
const sectionId = item.dataset.section;
|
|||
|
|
const section = document.getElementById(sectionId);
|
|||
|
|
|
|||
|
|
// Smooth scroll with offset for sticky nav
|
|||
|
|
const navHeight = document.getElementById('timeline-nav').offsetHeight;
|
|||
|
|
const sectionTop = section.offsetTop - navHeight;
|
|||
|
|
|
|||
|
|
window.scrollTo({
|
|||
|
|
top: sectionTop,
|
|||
|
|
behavior: 'smooth'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Update active timeline dot on scroll
|
|||
|
|
window.addEventListener('scroll', () => {
|
|||
|
|
const navHeight = document.getElementById('timeline-nav').offsetHeight;
|
|||
|
|
let currentSection = '';
|
|||
|
|
|
|||
|
|
sections.forEach(section => {
|
|||
|
|
const sectionTop = section.offsetTop - navHeight - 100;
|
|||
|
|
const sectionBottom = sectionTop + section.offsetHeight;
|
|||
|
|
|
|||
|
|
if (window.scrollY >= sectionTop && window.scrollY < sectionBottom) {
|
|||
|
|
currentSection = section.id;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
timelineItems.forEach(item => {
|
|||
|
|
item.classList.remove('active');
|
|||
|
|
item.querySelector('.timeline-dot').classList.remove('active');
|
|||
|
|
|
|||
|
|
if (item.dataset.section === currentSection) {
|
|||
|
|
item.classList.add('active');
|
|||
|
|
item.querySelector('.timeline-dot').classList.add('active');
|
|||
|
|
|
|||
|
|
// Scroll timeline into view on mobile
|
|||
|
|
if (window.innerWidth < 1024) {
|
|||
|
|
item.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'nearest' });
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// GSAP Animations
|
|||
|
|
gsap.registerPlugin(ScrollTrigger);
|
|||
|
|
|
|||
|
|
// Hero animation
|
|||
|
|
gsap.from('.hero-content', {
|
|||
|
|
opacity: 0,
|
|||
|
|
y: 50,
|
|||
|
|
duration: 1.2,
|
|||
|
|
ease: 'power3.out'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Card animations
|
|||
|
|
gsap.utils.toArray('.card').forEach((card, index) => {
|
|||
|
|
gsap.from(card, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: card,
|
|||
|
|
start: 'top 90%',
|
|||
|
|
end: 'top 60%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
},
|
|||
|
|
opacity: 0,
|
|||
|
|
y: 30,
|
|||
|
|
duration: 0.6,
|
|||
|
|
delay: index % 3 * 0.1,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Progress bar animations
|
|||
|
|
gsap.utils.toArray('.progress-fill').forEach(bar => {
|
|||
|
|
const width = bar.style.width;
|
|||
|
|
bar.style.width = '0%';
|
|||
|
|
|
|||
|
|
gsap.to(bar, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: bar,
|
|||
|
|
start: 'top 85%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
},
|
|||
|
|
width: width,
|
|||
|
|
duration: 1.5,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Stat number count-up animation
|
|||
|
|
gsap.utils.toArray('.stat-number').forEach(stat => {
|
|||
|
|
const text = stat.textContent;
|
|||
|
|
const hasNumber = /\d+/.test(text);
|
|||
|
|
|
|||
|
|
if (hasNumber) {
|
|||
|
|
const number = parseInt(text.match(/\d+/)[0]);
|
|||
|
|
stat.textContent = text.replace(/\d+/, '0');
|
|||
|
|
|
|||
|
|
gsap.to(stat, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: stat,
|
|||
|
|
start: 'top 85%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
},
|
|||
|
|
textContent: text.replace(/\d+/, number),
|
|||
|
|
duration: 2,
|
|||
|
|
ease: 'power2.out',
|
|||
|
|
snap: { textContent: 1 },
|
|||
|
|
onUpdate: function() {
|
|||
|
|
stat.textContent = text.replace(/\d+/, Math.ceil(this.targets()[0].textContent.match(/\d+/)[0]));
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Image reveal animation
|
|||
|
|
gsap.utils.toArray('.image-container').forEach(container => {
|
|||
|
|
gsap.from(container, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: container,
|
|||
|
|
start: 'top 85%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
},
|
|||
|
|
scale: 0.95,
|
|||
|
|
opacity: 0,
|
|||
|
|
duration: 0.8,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Info box animation
|
|||
|
|
gsap.utils.toArray('.info-box').forEach(box => {
|
|||
|
|
gsap.from(box, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: box,
|
|||
|
|
start: 'top 85%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
},
|
|||
|
|
opacity: 0,
|
|||
|
|
x: -30,
|
|||
|
|
duration: 0.8,
|
|||
|
|
ease: 'power2.out'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Agent badge animation
|
|||
|
|
gsap.utils.toArray('.agent-badge').forEach(badge => {
|
|||
|
|
gsap.from(badge, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: badge,
|
|||
|
|
start: 'top 85%',
|
|||
|
|
toggleActions: 'play none none reverse'
|
|||
|
|
},
|
|||
|
|
opacity: 0,
|
|||
|
|
scale: 0.8,
|
|||
|
|
duration: 0.6,
|
|||
|
|
ease: 'back.out(1.7)'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Parallax effect for backgrounds
|
|||
|
|
gsap.utils.toArray('.section').forEach(section => {
|
|||
|
|
gsap.to(section, {
|
|||
|
|
scrollTrigger: {
|
|||
|
|
trigger: section,
|
|||
|
|
start: 'top bottom',
|
|||
|
|
end: 'bottom top',
|
|||
|
|
scrub: 1
|
|||
|
|
},
|
|||
|
|
backgroundPosition: '50% 100px',
|
|||
|
|
ease: 'none'
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Mobile menu auto-hide on scroll
|
|||
|
|
let lastScrollTop = 0;
|
|||
|
|
const nav = document.getElementById('timeline-nav');
|
|||
|
|
|
|||
|
|
window.addEventListener('scroll', () => {
|
|||
|
|
if (window.innerWidth < 768) {
|
|||
|
|
const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
|||
|
|
|
|||
|
|
if (scrollTop > lastScrollTop && scrollTop > 100) {
|
|||
|
|
// Scrolling down
|
|||
|
|
nav.style.transform = 'translateY(-100%)';
|
|||
|
|
} else {
|
|||
|
|
// Scrolling up
|
|||
|
|
nav.style.transform = 'translateY(0)';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// Touch event optimization for mobile
|
|||
|
|
if ('ontouchstart' in window) {
|
|||
|
|
document.querySelectorAll('.card, .timeline-item, .stat-card').forEach(el => {
|
|||
|
|
el.addEventListener('touchstart', function() {
|
|||
|
|
this.style.transform = 'scale(0.98)';
|
|||
|
|
}, { passive: true });
|
|||
|
|
|
|||
|
|
el.addEventListener('touchend', function() {
|
|||
|
|
this.style.transform = '';
|
|||
|
|
}, { passive: true });
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Lazy loading optimization
|
|||
|
|
if ('IntersectionObserver' in window) {
|
|||
|
|
const imageObserver = new IntersectionObserver((entries, observer) => {
|
|||
|
|
entries.forEach(entry => {
|
|||
|
|
if (entry.isIntersecting) {
|
|||
|
|
const img = entry.target;
|
|||
|
|
if (img.dataset.src) {
|
|||
|
|
img.src = img.dataset.src;
|
|||
|
|
img.removeAttribute('data-src');
|
|||
|
|
}
|
|||
|
|
observer.unobserve(img);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}, {
|
|||
|
|
rootMargin: '50px'
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
document.querySelectorAll('img[data-src]').forEach(img => {
|
|||
|
|
imageObserver.observe(img);
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Performance optimization: Debounce scroll events
|
|||
|
|
function debounce(func, wait) {
|
|||
|
|
let timeout;
|
|||
|
|
return function executedFunction(...args) {
|
|||
|
|
const later = () => {
|
|||
|
|
clearTimeout(timeout);
|
|||
|
|
func(...args);
|
|||
|
|
};
|
|||
|
|
clearTimeout(timeout);
|
|||
|
|
timeout = setTimeout(later, wait);
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// Apply debouncing to scroll-heavy operations
|
|||
|
|
const debouncedScrollHandler = debounce(() => {
|
|||
|
|
// Any additional scroll handling can go here
|
|||
|
|
}, 100);
|
|||
|
|
|
|||
|
|
window.addEventListener('scroll', debouncedScrollHandler, { passive: true });
|
|||
|
|
|
|||
|
|
// Viewport height fix for mobile browsers
|
|||
|
|
function setVH() {
|
|||
|
|
const vh = window.innerHeight * 0.01;
|
|||
|
|
document.documentElement.style.setProperty('--vh', `${vh}px`);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
setVH();
|
|||
|
|
window.addEventListener('resize', debounce(setVH, 100));
|
|||
|
|
|
|||
|
|
console.log('🤖 青莳轻食 v5 - 响应式优化版本已加载');
|
|||
|
|
console.log('📱 已优化移动端体验、触摸交互和性能');
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|