yanyan
/
food-menu


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点菜喵 - 餐饮决策智能中枢</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/black.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@8.4.5/swiper-bundle.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8.4.5/swiper-bundle.min.css">
    <style>
        :root {
            --primary-color: #9E1F36; /* 故宫红 */
            --secondary-color: #0D19A3; /* 量子蓝 */
            --accent-color: #00F5C0; /* 数据流绿 */
            --text-default-color: #f0f0f0;
            --dark-bg: #0a0a1a;
            --neon-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color);
        }
        
        body {
            font-family: 'Arial', 'Microsoft YaHei', sans-serif;
            background-color: var(--dark-bg);
            color: var(--text-default-color);
        }
        
        .reveal {
            background: linear-gradient(135deg, var(--dark-bg) 0%, #1a0a1a 100%);
        }
        
        .reveal .slides {
            text-align: left;
            width: 90% !important;
            height: 90% !important;
        }
        
        /* 封面背景 */
        .template-cover {
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="%2300F5C0" stroke-width="0.5"/></pattern><rect width="100%" height="100%" fill="%230a0a1a"/><rect width="100%" height="100%" fill="url(%23grid)"/></svg>');
            background-size: cover;
            position: relative;
            overflow: hidden;
        }
        
        .template-cover::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle at 70% 30%, transparent 0%, var(--primary-color) 70%);
            opacity: 0.3;
            z-index: 0;
        }
        
        .template-cover::after {
            content: "";
            position: absolute;
            bottom: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M20,100 Q100,20 180,100 T20,100" fill="none" stroke="%239E1F36" stroke-width="2"/></svg>') repeat;
            opacity: 0.2;
            z-index: 0;
        }
        
        /* 页面背景 */
        .template-page {
            background: linear-gradient(135deg, rgba(10,10,26,0.9) 0%, rgba(26,10,26,0.9) 100%);
            border: 1px solid var(--secondary-color);
            box-shadow: var(--neon-shadow);
            position: relative;
            overflow: hidden;
        }
        
        .template-page::before {
            display: none;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><circle cx="50" cy="50" r="1" fill="%2300F5C0" opacity="0.3"/></svg>');
            opacity: 0.1;
            z-index: 0;
        }
        
        /* 内容容器 */
        .content-box {
            position: relative;
            z-index: 1;
            height: 100%;
            padding: 2rem;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        /* 标题样式 */
        .reveal h1, .reveal h2, .reveal h3 {
            color: var(--primary-color);
            text-shadow: 0 0 8px rgba(158, 31, 54, 0.7);
            margin-bottom: 1rem;
            font-weight: 700;
        }
        
        .reveal h1 {
            font-size: 3.5rem;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: 3px;
        }
        
        .reveal h2 {
            font-size: 2.5rem;
            border-bottom: 2px solid var(--accent-color);
            padding-bottom: 0.5rem;
            display: inline-block;
        }
        
        .reveal h3 {
            font-size: 1.8rem;
            color: var(--accent-color);
        }
        
        /* 段落样式 */
        .reveal p, .reveal li {
            color: var(--text-default-color);
            font-size: 1.4rem;
            line-height: 1.6;
            margin-bottom: 1rem;
        }
        
        .reveal strong {
            color: var(--accent-color);
        }
        
        /* 列表样式 */
        .reveal ul {
            margin-left: 1.5rem;
        }
        
        .reveal li {
            margin-bottom: 0.8rem;
            position: relative;
            padding-left: 1.5rem;
        }
        
        .reveal li::before {
            content: "▹";
            position: absolute;
            left: 0;
            color: var(--accent-color);
        }
        
        /* 表格样式 */
        .reveal table {
            border-collapse: collapse;
            width: 100%;
            margin: 1.5rem 0;
            font-size: 1.2rem;
        }
        
        .reveal th {
            background-color: rgba(13, 25, 163, 0.5);
            color: var(--accent-color);
            padding: 0.8rem;
            text-align: left;
        }
        
        .reveal td {
            padding: 0.8rem;
            border-bottom: 1px solid rgba(0, 245, 192, 0.2);
        }
        
        .reveal tr:nth-child(even) {
            background-color: rgba(10, 10, 26, 0.5);
        }
        
        /* 特殊元素 */
        .neon-text {
            text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color);
            color: white;
        }
        
        .pixel-border {
            border: 4px solid var(--accent-color);
            position: relative;
            box-shadow: var(--neon-shadow);
        }
        
        .pixel-border::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid var(--primary-color);
            z-index: -1;
            opacity: 0.7;
        }
        
        /* 动画效果 */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        @keyframes pulse {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.7; }
        }
        
        .float-animation {
            animation: float 3s ease-in-out infinite;
        }
        
        .pulse-animation {
            animation: pulse 2s ease-in-out infinite;
        }
        
        /* 封面页样式 */
        .cover-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            height: 100%;
            padding: 2rem;
            position: relative;
        }
        
        .logo-container {
            position: absolute;
            top: 2rem;
            right: 2rem;
            width: 150px;
            height: 150px;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .logo {
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            box-shadow: 0 0 30px var(--primary-color);
        }
        
        .logo::before, .logo::after {
            content: "";
            position: absolute;
            background-color: var(--accent-color);
            border-radius: 50%;
        }
        
        .logo::before {
            width: 30px;
            height: 30px;
            top: 20px;
            left: 40px;
            box-shadow: 0 0 15px var(--accent-color);
        }
        
        .logo::after {
            width: 30px;
            height: 30px;
            top: 20px;
            right: 40px;
            box-shadow: 0 0 15px var(--accent-color);
        }
        
        .logo-text {
            font-size: 2rem;
            font-weight: bold;
            color: white;
            transform: rotate(-15deg);
            text-shadow: 0 0 10px var(--accent-color);
        }
        
        /* 目录页样式 */
        .mermaid-container {
            width: 100%;
            height: 70%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .mermaid-node {
            width: 200px;
            height: 100px;
            background: rgba(13, 25, 163, 0.3);
            border: 2px solid var(--accent-color);
            border-radius: 10px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            margin: 0 1rem;
            position: relative;
            transition: all 0.3s ease;
            cursor: pointer;
        }
        
        .mermaid-node:hover {
            transform: scale(1.05);
            box-shadow: var(--neon-shadow);
            background: rgba(13, 25, 163, 0.6);
        }
        
        .mermaid-node i {
            font-size: 2rem;
            margin-bottom: 0.5rem;
            color: var(--accent-color);
        }
        
        .mermaid-arrow {
            position: absolute;
            width: 50px;
            height: 4px;
            background-color: var(--accent-color);
            top: 50%;
            right: -50px;
        }
        
        .mermaid-arrow::after {
            content: "";
            position: absolute;
            right: 0;
            top: -6px;
            width: 0;
            height: 0;
            border-left: 10px solid var(--accent-color);
            border-top: 8px solid transparent;
            border-bottom: 8px solid transparent;
        }
        
        /* 痛点页样式 */
        .pain-points-container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        
        .chart-container {
            flex: 1;
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
        }
        
        .chart-box {
            width: 48%;
            height: 100%;
            background: rgba(0, 0, 0, 0.3);
            border: 1px solid var(--secondary-color);
            border-radius: 5px;
            padding: 1rem;
        }
        
        /* 产品定位页样式 */
        .golden-circle-container {
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 70%;
            margin-top: 2rem;
        }
        
        .circle-item {
            width: 25%;
            height: 80%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            position: relative;
        }
        
        .circle-why {
            border: 4px solid var(--primary-color);
            border-radius: 50%;
            padding: 2rem;
            background: rgba(158, 31, 54, 0.1);
        }
        
        .circle-how {
            border: 4px solid var(--accent-color);
            border-radius: 50%;
            padding: 2rem;
            background: rgba(0, 245, 192, 0.1);
        }
        
        .circle-what {
            border: 4px solid var(--secondary-color);
            border-radius: 50%;
            padding: 2rem;
            background: rgba(13, 25, 163, 0.1);
        }
        
        .infinity-symbol {
            position: absolute;
            bottom: -50px;
            width: 200px;
            height: 100px;
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--accent-color);
            font-size: 2rem;
        }
        
        /* 功能页样式 */
        .feature-container {
            height: 80%;
            display: flex;
            flex-direction: column;
        }
        
        .swiper {
            width: 100%;
            height: 100%;
            margin-top: 1rem;
        }
        
        .swiper-slide {
            background: rgba(10, 10, 26, 0.7);
            border: 1px solid var(--secondary-color);
            border-radius: 10px;
            padding: 1.5rem;
            display: flex;
            flex-direction: column;
            box-shadow: 0 0 15px rgba(0, 245, 192, 0.3);
        }
        
        .swiper-slide h3 {
            border-bottom: 2px solid var(--accent-color);
            padding-bottom: 0.5rem;
            margin-bottom: 1rem;
        }
        
        /* 技术架构页样式 - 修改部分 */
        .tech-architecture {
            display: flex;
            flex-direction: column;
            height: 80%;
            overflow-y: auto;
            scrollbar-width: thin;
            scrollbar-color: var(--accent-color) rgba(0,0,0,0.1);
            padding-right: 5px;
        }
        
        .tech-architecture::-webkit-scrollbar {
            width: 6px;
        }
        
        .tech-architecture::-webkit-scrollbar-track {
            background: rgba(0,0,0,0.1);
        }
        
        .tech-architecture::-webkit-scrollbar-thumb {
            background-color: var(--accent-color);
            border-radius: 3px;
        }
        
        .tech-layer {
            min-height: 100px;
            height: auto;
            padding: 1rem 2rem;
            margin: 0.5rem 0;
            border-left: 5px solid var(--accent-color);
            background: linear-gradient(to right, rgba(0, 245, 192, 0.1), transparent);
            position: relative;
            transition: all 0.3s ease;
        }
        
        .tech-layer:hover {
            background: linear-gradient(to right, rgba(0, 245, 192, 0.3), transparent);
            box-shadow: 0 0 10px rgba(0, 245, 192, 0.2);
        }
        
        .tech-icon {
            margin-right: 2rem;
            font-size: 2rem;
            color: var(--accent-color);
        }
        
        /* 商业模式页样式 */
        .business-model-container {
            height: 80%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        
        .profit-wheel {
            width: 300px;
            height: 300px;
            border-radius: 50%;
            border: 3px solid var(--accent-color);
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
            animation: rotate 20s linear infinite;
        }
        
        @keyframes rotate {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .wheel-item {
            position: absolute;
            width: 80px;
            height: 80px;
            background: rgba(158, 31, 54, 0.7);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
            font-size: 0.9rem;
            box-shadow: 0 0 10px var(--primary-color);
        }
        
        .wheel-item:nth-child(1) {
            top: -40px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .wheel-item:nth-child(2) {
            top: 50%;
            right: -40px;
            transform: translateY(-50%);
        }
        
        .wheel-item:nth-child(3) {
            bottom: -40px;
            left: 50%;
            transform: translateX(-50%);
        }
        
        .wheel-item:nth-child(4) {
            top: 50%;
            left: -40px;
            transform: translateY(-50%);
        }
        
        .wheel-center {
            width: 100px;
            height: 100px;
            background: var(--primary-color);
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 1.5rem;
            font-weight: bold;
            box-shadow: 0 0 20px var(--primary-color);
        }
        
        /* 封底页样式 */
        .end-container {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100%;
            position: relative;
        }
        
        .qr-code {
            width: 200px;
            height: 200px;
            background: white;
            padding: 10px;
            margin: 2rem 0;
            position: relative;
        }
        
        .qr-code::before {
            content: "";
            position: absolute;
            top: -15px;
            left: -15px;
            right: -15px;
            bottom: -15px;
            border: 2px solid var(--accent-color);
            z-index: -1;
            opacity: 0.7;
        }
        
        .cta-buttons {
            display: flex;
            gap: 2rem;
            margin-top: 2rem;
        }
        
        .cta-button {
            padding: 0.8rem 2rem;
            border: none;
            border-radius: 5px;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .cta-primary {
            background-color: var(--primary-color);
            color: white;
            box-shadow: 0 0 15px var(--primary-color);
        }
        
        .cta-secondary {
            background-color: var(--secondary-color);
            color: white;
            box-shadow: 0 0 15px var(--secondary-color);
        }
        
        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 0 25px var(--accent-color);
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .reveal h1 {
                font-size: 2.5rem;
            }
            
            .reveal h2 {
                font-size: 2rem;
            }
            
            .golden-circle-container {
                flex-direction: column;
                height: auto;
            }
            
            .circle-item {
                width: 80%;
                margin-bottom: 2rem;
            }
            
            .mermaid-container {
                flex-direction: column;
                height: auto;
            }
            
            .mermaid-node {
                margin: 1rem 0;
            }
            
            .mermaid-arrow {
                width: 4px;
                height: 50px;
                top: auto;
                bottom: -50px;
                left: 50%;
                transform: translateX(-50%);
            }
            
            .mermaid-arrow::after {
                right: -6px;
                top: auto;
                bottom: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-top: 10px solid var(--accent-color);
                border-bottom: none;
            }
            
            /* 移动端技术架构优化 */
            .tech-layer {
                padding: 0.8rem 1rem;
                margin: 0.3rem 0;
                min-height: 80px;
            }
            
            .tech-icon {
                margin-right: 1rem;
                font-size: 1.5rem;
            }
            
            .tech-layer p {
                font-size: 1.2rem;
            }
        }
        
        /* 新增样式：SWOT分析 */
        .swot-container {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-template-rows: auto auto;
            gap: 1rem;
            height: 80%;
        }
        
        .swot-quadrant {
            border: 2px solid;
            border-radius: 8px;
            padding: 1rem;
            position: relative;
            overflow: hidden;
        }
        
        .swot-quadrant h3 {
            margin-top: 0;
            padding-bottom: 0.5rem;
            border-bottom: 2px solid;
            margin-bottom: 1rem;
        }
        
        .strengths {
            border-color: var(--accent-color);
        }
        
        .weaknesses {
            border-color: #FF6B6B;
        }
        
        .opportunities {
            border-color: #4CAF50;
        }
        
        .threats {
            border-color: #FF9800;
        }
        
        /* 用户场景卡片 */
        .user-scene-card {
            background: rgba(40,40,60,0.8);
            border-radius: 8px;
            padding: 1.5rem;
            border-left: 4px solid var(--primary-color);
            margin-bottom: 1.5rem;
        }
        
        .user-profile {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        
        .user-avatar {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            display: flex;
            justify-content: center;
            align-items: center;
            margin-right: 1rem;
            font-size: 1.5rem;
        }
        
        .kano-model {
            display: flex;
            justify-content: space-between;
            margin-top: 1rem;
        }
        
        .kano-item {
            width: 30%;
            background: rgba(70,70,90,0.6);
            padding: 1rem;
            border-radius: 6px;
        }
        
        .kano-item h4 {
            color: var(--accent-color);
            margin-top: 0;
        }
    </style>
</head>
<body>
    <div class="reveal">
        <div class="slides">
            <!-- 封面页 -->
            <section class="template-cover">
                <div class="cover-container">
                    <h1 class="neon-text">点菜喵</h1>
                    <h3 class="neon-text">餐饮决策智能中枢</h3>
                    <p style="color: var(--accent-color); font-size: 1.8rem; margin-top: 2rem;">用AI重构3000亿点餐市场</p>
                    <div style="margin-top: 3rem;">
                        <p style="font-size: 1.2rem; color: rgba(255,255,255,0.7);">AI驱动 · 多模态交互 · 智能调度 · 食安区块链</p>
                    </div>
                    <div class="logo-container float-animation">
                        <div class="logo">
                            <div class="logo-text">喵</div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 目录页 -->
            <section class="template-page">
                <div class="content-box">
                    <h2>三维导航</h2>
                    <div class="mermaid-container">
                        <div class="mermaid-node" onclick="Reveal.slide(2);">
                            <i class="fas fa-chart-line"></i>
                            <h3>市场分析</h3>
                            <div class="mermaid-arrow"></div>
                        </div>
                        <div class="mermaid-node" onclick="Reveal.slide(3);">
                            <i class="fas fa-bolt"></i>
                            <h3>核心痛点</h3>
                            <div class="mermaid-arrow"></div>
                        </div>
                        <div class="mermaid-node" onclick="Reveal.slide(4);">
                            <i class="fas fa-crosshairs"></i>
                            <h3>产品定位</h3>
                            <div class="mermaid-arrow"></div>
                        </div>
                        <div class="mermaid-node" onclick="Reveal.slide(5);">
                            <i class="fas fa-cogs"></i>
                            <h3>解决方案</h3>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 市场环境分析页 -->
            <section class="template-page">
                <div class="content-box">
                    <h2>市场环境分析</h2>
                    <p>PEST模型解析餐饮数字化机遇</p>
                    
                    <div class="swot-container">
                        <div class="swot-quadrant strengths">
                            <h3>政策环境 (Political)</h3>
                            <ul>
                                <li>国家推动"互联网+"与服务业数字化转型</li>
                                <li>食品安全监管强化催生溯源需求</li>
                                <li>电子发票普及成为合规刚需</li>
                                <li>反垄断政策鼓励自建点餐渠道</li>
                            </ul>
                        </div>
                        
                        <div class="swot-quadrant opportunities">
                            <h3>经济环境 (Economic)</h3>
                            <ul>
                                <li>餐饮市场规模庞大但竞争激烈</li>
                                <li>人力、租金成本持续攀升</li>
                                <li>消费者追求便捷与效率</li>
                                <li>数字化转型投资增加</li>
                            </ul>
                        </div>
                        
                        <div class="swot-quadrant weaknesses">
                            <h3>社会环境 (Sociocultural)</h3>
                            <ul>
                                <li>移动互联网深度渗透</li>
                                <li>95后占比超60%的扫码点餐原生用户</li>
                                <li>健康饮食趋势催生菜品溯源需求</li>
                                <li>消费习惯向自助化、个性化转变</li>
                            </ul>
                        </div>
                        
                        <div class="swot-quadrant threats">
                            <h3>技术环境 (Technological)</h3>
                            <ul>
                                <li>4G/5G网络为移动点餐提供基础</li>
                                <li>移动支付技术高度成熟</li>
                                <li>AI与大数据应用兴起</li>
                                <li>API生态繁荣促进系统集成</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 核心痛点页 -->
            <section class="template-page">
                <div class="content-box">
                    <h2>核心痛点分析</h2>
                    <p>覆盖全链路角色（顾客、服务员、餐厅管理者、后厨）</p>
                    
                    <div style="height: 80%; overflow-y: auto; padding-right: 10px;">
                        <table>
                            <thead>
                                <tr>
                                    <th>维度</th>
                                    <th>具体痛点</th>
                                    <th>典型场景表现</th>
                                    <th>量化影响</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td rowspan="3"><strong>顾客体验</strong></td>
                                    <td>等待时间过长</td>
                                    <td>高峰时段排队点餐>15分钟</td>
                                    <td>大部分顾客因等待流失</td>
                                </tr>
                                <tr>
                                    <td>信息不透明</td>
                                    <td>菜品售罄后被动告知，过敏源无标注</td>
                                    <td>客诉源于信息差</td>
                                </tr>
                                <tr>
                                    <td>个性化需求难满足</td>
                                    <td>定制化口味传达错误，会员权益未识别</td>
                                    <td>客单价降低12%</td>
                                </tr>
                                
                                <tr>
                                    <td rowspan="3"><strong>运营效率</strong></td>
                                    <td>人力成本高企</td>
                                    <td>需专职点餐员3名/店（月成本>1.5万）</td>
                                    <td>人力占营收比超22%</td>
                                </tr>
                                <tr>
                                    <td>流程协同低效</td>
                                    <td>手写菜单传菜差错率>15%</td>
                                    <td>出餐速度下降40%</td>
                                </tr>
                                <tr>
                                    <td>资源调度失衡</td>
                                    <td>无法预测高峰时段备菜量</td>
                                    <td>食材浪费率高达18%</td>
                                </tr>
                                
                                <tr>
                                    <td rowspan="3"><strong>管理决策</strong></td>
                                    <td>数据孤岛严重</td>
                                    <td>POS机/外卖平台/会员数据分离</td>
                                    <td>决策延迟导致机会损失</td>
                                </tr>
                                <tr>
                                    <td>经营分析盲区</td>
                                    <td>热销菜品与利润菜品混淆</td>
                                    <td>菜单更新失误率>35%</td>
                                </tr>
                                <tr>
                                    <td>营销效果难追踪</td>
                                    <td>"满减活动"转化率依赖估算</td>
                                    <td>促销成本浪费45%</td>
                                </tr>
                                
                                <tr>
                                    <td rowspan="3"><strong>合规风险</strong></td>
                                    <td>食安溯源缺位</td>
                                    <td>无法提供食材供应商电子台账</td>
                                    <td>违规处罚风险上升200%</td>
                                </tr>
                                <tr>
                                    <td>支付安全漏洞</td>
                                    <td>手写记录信用卡信息致泄露</td>
                                    <td>每店年均盗刷损失¥8,000+</td>
                                </tr>
                                <tr>
                                    <td>政策响应滞后</td>
                                    <td>发票新规实施后无法即时开电子票</td>
                                    <td>面临停业整改风险</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </section>
            
            <!-- 用户场景页 -->
            <section class="template-page">
                <div class="content-box">
                    <h2>用户场景分析</h2>
                    <p style="color: var(--accent-color);">用户需求 = 用户画像 × 场景 × 关注目标</p>
                    
                    <div style="height: 80%; overflow-y: auto; padding-right: 10px;">
                        <div class="user-scene-card">
                            <div class="user-profile">
                                <div class="user-avatar"><i class="fas fa-user-graduate"></i></div>
                                <div>
                                    <h3>网红店排队体验优化</h3>
                                    <p>18-30岁年轻消费者，热衷社交媒体打卡</p>
                                </div>
                            </div>
                            <p><strong>场景：</strong>网红餐厅现场排队40分钟，无座位、环境嘈杂</p>
                            <p><strong>关注目标：</strong>缓解焦虑感 + 消磨碎片时间 + 提升期待感</p>
                            
                            <div class="kano-model">
                                <div class="kano-item">
                                    <h4>基本需求</h4>
                                    <p>实时预估排队进度（误差≤3分钟）</p>
                                </div>
                                <div class="kano-item">
                                    <h4>期望需求</h4>
                                    <p>获取与餐厅相关的文化故事</p>
                                </div>
                                <div class="kano-item">
                                    <h4>兴奋需求</h4>
                                    <p>AI生成专属等位剧情（用户自拍+趣味故事）</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="user-scene-card">
                            <div class="user-profile">
                                <div class="user-avatar"><i class="fas fa-briefcase"></i></div>
                                <div>
                                    <h3>商务宴请智能策划</h3>
                                    <p>35-50岁企业高管/商务人士，需维护客户关系</p>
                                </div>
                            </div>
                            <p><strong>场景：</strong>接待重要客户前的宴请方案策划</p>
                            <p><strong>关注目标：</strong>展现文化涵养 + 精准匹配宾客偏好 + 降低决策成本</p>
                            
                            <div class="kano-model">
                                <div class="kano-item">
                                    <h4>基本需求</h4>
                                    <p>自动规避甲方公开忌口（如海鲜过敏）</p>
                                </div>
                                <div class="kano-item">
                                    <h4>期望需求</h4>
                                    <p>生成可分享的电子宴请笺（附菜品文化解读）</p>
                                </div>
                                <div class="kano-item">
                                    <h4>兴奋需求</h4>
                                    <p>席间实时推送「话题弹药」（如东坡肉上菜时触发苏轼冷知识）</p>
                                </div>
                            </div>
                        </div>
                        
                        <div class="user-scene-card">
                            <div class="user-profile">
                                <div class="user-avatar"><i class="fas fa-users"></i></div>
                                <div>
                                    <h3>个性化选餐决策</h3>
                                    <p>25-45岁家庭/朋友聚餐决策者，有明确忌口</p>
                                </div>
                            </div>
                            <p><strong>场景：</strong>使用美团点餐时面对200+菜品</p>
                            <p><strong>关注目标：</strong>10分钟内完成点餐 + 确保所有人满意 + 感知菜品价值</p>
                            
                            <div class="kano-model">
                                <div class="kano-item">
                                    <h4>基本需求</h4>
                                    <p>强制录入忌口（宗教/过敏/口味）自动屏蔽违规菜品</p>
                                </div>
                                <div class="kano-item">
                                    <h4>期望需求</h4>
                                    <p>「一键优化」按钮（按价格/口味/上菜速度重新排序）</p>
                                </div>
                                <div class="kano-item">
                                    <h4>兴奋需求</h4>
                                    <p>生成「共识型套餐」（AI解析历史订单：朋友聚餐85%选A+B+C组合）</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 产品定位页 -->
            <section class="template-page">
                <div class="content-box">
                    <h2>产品定位</h2>
                    <p style="color: var(--accent-color);">黄金圈法则：从为什么开始</p>
                    
                    <div class="golden-circle-container">
                        <div class="circle-item">
                            <div class="circle-why">
                                <h3>WHY</h3>
                                <p>重构餐饮决策体验</p>
                                <p>连接顾客与商家的数字化桥梁</p>
                                <p>让每次点餐都成为幸福感决策</p>
                            </div>
                        </div>
                        
                        <div class="circle-item">
                            <div class="circle-how">
                                <h3>HOW</h3>
                                <ul style="text-align: left; list-style: none; padding: 0;">
                                    <li>AI驱动的智能推荐引擎</li>
                                    <li>多模态交互菜单系统</li>
                                    <li>实时数据分析与决策支持</li>
                                    <li>全链路食品安全溯源</li>
                                </ul>
                            </div>
                        </div>
                        
                        <div class="circle-item">
                            <div class="circle-what">
                                <h3>WHAT</h3>
                                <ul style="text-align: left; list-style: none; padding: 0;">
                                    <li>顾客端：微信小程序/H5</li>
                                    <li>商家管理端：Web后台</li>
                                    <li>厨显终端：专用设备</li>
                                    <li>三端协同的智能点餐系统</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                    
                    <div class="infinity-symbol">
                        <i class="fas fa-infinity"></i>
                    </div>
                </div>
            </section>
            
            <!-- 解决方案页 -->
            <section class="template-page">
                <div class="content-box">
                    <h2>解决方案</h2>
                    <p style="color: var(--accent-color);">端到端的智能点餐生态系统</p>
                    
                    <div class="feature-container">
                        <div class="swiper">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <h3>顾客端功能</h3>
                                    <ul>
                                        <li>智能菜单浏览：图文+视频展示菜品</li>
                                        <li>个性化推荐：基于历史偏好和场景</li>
                                        <li>多人协作点餐：实时共享购物车</li>
                                        <li>一键下单支付：支持主流支付方式</li>
                                        <li>订单实时追踪：从下单到上菜全流程</li>
                                    </ul>
                                </div>
                                <div class="swiper-slide">
                                    <h3>商家管理端</h3>
                                    <ul>
                                        <li>菜单智能管理：时段菜单、促销设置</li>
                                        <li>实时订单看板：状态监控与异常预警</li>
                                        <li>经营数据分析：热销/利润菜品分析</li>
                                        <li>会员精准营销：沉睡客户唤醒策略</li>
                                        <li>库存销量联动：智能采购预测</li>
                                    </ul>
                                </div>
                                <div class="swiper-slide">
                                    <h3>厨显终端系统</h3>
                                    <ul>
                                        <li>智能订单分派：基于厨房负载动态调整</li>
                                        <li>生产进度追踪：实时状态可视化</li>
                                        <li>食材溯源管理：区块链记录全流程</li>
                                        <li>异常处理机制：缺货自动通知替换</li>
                                        <li>绩效数据分析：厨师效率与菜品评价</li>
                                    </ul>
                                </div>
                                <div class="swiper-slide">
                                    <h3>核心技术优势</h3>
                                    <ul>
                                        <li>AI推荐引擎：提升客单价19%</li>
                                        <li>量子调度算法：出餐速度提升40%</li>
                                        <li>区块链溯源：食品安全零事故</li>
                                        <li>边缘计算架构：高峰并发99.99%可用</li>
                                        <li>联邦学习模型：隐私保护下数据共享</li>
                                    </ul>
                                </div>
                            </div>
                            <div class="swiper-pagination"></div>
                            <div class="swiper-button-prev"></div>
                            <div class="swiper-button-next"></div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 技术架构页 -->
            <section class="template-page">
                <div class="content-box">
                    <h2>技术架构</h2>
                    <p style="color: var(--accent-color);">分层模型与核心技术栈</p>
                    
                    <div class="tech-architecture">
                        <div class="tech-layer">
                            <div class="tech-icon"><i class="fas fa-brain"></i></div>
                            <div>
                                <h3>智能层</h3>
                                <p>AI推荐引擎 · 负荷预测模型 · 情感计算 · 计算机视觉</p>
                                <p style="font-size: 1.3rem; color: var(--accent-color);">TensorFlow/PyTorch · OpenCV · 自研算法</p>
                                <p>多模态学习模型融合菜品特征、用户画像和环境因素</p>
                            </div>
                        </div>
                        
                        <div class="tech-layer">
                            <div class="tech-icon"><i class="fas fa-project-diagram"></i></div>
                            <div>
                                <h3>业务层</h3>
                                <p>订单管理 · 支付网关 · 库存调度 · 会员系统</p>
                                <p style="font-size: 1.3rem; color: var(--accent-color);">Spring Cloud · Kafka · Redis · MySQL</p>
                                <p>分布式事务处理保证订单一致性</p>
                            </div>
                        </div>
                        
                        <div class="tech-layer">
                            <div class="tech-icon"><i class="fas fa-database"></i></div>
                            <div>
                                <h3>数据层</h3>
                                <p>实时数仓 · 知识图谱 · 区块链 · 联邦学习</p>
                                <p style="font-size: 1.3rem; color: var(--accent-color);">Hadoop · Neo4j · Hyperledger · FATE</p>
                                <p>食安区块链实现全流程可追溯</p>
                            </div>
                        </div>
                        
                        <div class="tech-layer">
                            <div class="tech-icon"><i class="fas fa-server"></i></div>
                            <div>
                                <h3>基础设施层</h3>
                                <p>容器化部署 · 微服务架构 · 负载均衡 · 自动扩缩容</p>
                                <p style="font-size: 1.3rem; color: var(--accent-color);">Kubernetes · Docker · AWS/GCP</p>
                                <p>高可用架构保证99.99%服务可用性</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 商业模式页 -->
            <section class="template-page">
                <div class="content-box">
                    <h2>商业模式</h2>
                    <p style="color: var(--accent-color);">盈利飞轮与市场策略</p>
                    
                    <div class="business-model-container">
                        <div class="profit-wheel">
                            <div class="wheel-item" style="top: -40px; left: 50%; transform: translateX(-50%);">SAAS订阅</div>
                            <div class="wheel-item" style="top: 50%; right: -40px; transform: translateY(-50%);">交易佣金</div>
                            <div class="wheel-item" style="bottom: -40px; left: 50%; transform: translateX(-50%);">数据服务</div>
                            <div class="wheel-item" style="top: 50%; left: -40px; transform: translateY(-50%);">增值功能</div>
                            <div class="wheel-center">点菜喵</div>
                        </div>
                        
                        <div style="margin-top: 3rem; width: 80%;">
                            <h3>市场进入策略</h3>
                            <div style="display: flex; justify-content: space-around; margin-top: 1rem;">
                                <div style="text-align: center;">
                                    <p style="color: var(--accent-color); font-size: 1.5rem;">高端餐厅</p>
                                    <p>标杆案例打造</p>
                                </div>
                                <div style="text-align: center;">
                                    <p style="color: var(--accent-color); font-size: 1.5rem;">连锁品牌</p>
                                    <p>规模化部署</p>
                                </div>
                                <div style="text-align: center;">
                                    <p style="color: var(--accent-color); font-size: 1.5rem;">下沉市场</p>
                                    <p>轻量版普及</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 项目团队页 -->
            <section class="template-page">
                <div class="content-box">
                    <h2>项目团队</h2>
                    <p style="color: var(--accent-color);">专业多元的核心执行团队</p>
                    
                    <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem;">
                        <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center;">
                            <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
                            <h3>贺子权 0235646</h3>
                            <p>产品负责人</p>
                        </div>
                        <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center;">
                            <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
                            <h3>严燕 0235648</h3>
                            <p>技术架构师</p>
                        </div>
                        <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center;">
                            <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
                            <h3>吴智超 0235615</h3>
                            <p>后端开发</p>
                        </div>
                        <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center;">
                            <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
                            <h3>廖仓 0235614</h3>
                            <p>前端开发</p>
                        </div>
                        <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center; grid-column: span 2;">
                            <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
                            <h3>喻妍 02356</h3>
                            <p>UI/UX设计师</p>
                        </div>
                    </div>
                </div>
            </section>
            
            <!-- 封底页 -->
            <section class="template-cover">
                <div class="end-container">
                    <h2 class="neon-text">开启智能餐饮新时代</h2>
                    <p style="font-size: 1.5rem; color: var(--accent-color);">点菜喵 - 餐饮决策智能中枢</p>
                    
                    <div class="qr-code float-animation">
                        <div style="width: 100%; height: 100%; background: #fff; display: flex; justify-content: center; align-items: center; font-size: 1rem; color: #000; text-align: center;">
                            点菜喵<br>小程序二维码
                        </div>
                    </div>
                    
                    <div class="cta-buttons">
                        <button class="cta-button cta-primary">立即体验</button>
                        <button class="cta-button cta-secondary">商务合作</button>
                    </div>
                    
                    <p style="position: absolute; bottom: 1rem; font-size: 1rem; color: rgba(255,255,255,0.7);">
                        项目团队：贺子权 · 严燕 · 吴智超 · 廖仓 · 喻妍
                    </p>
                </div>
            </section>
        </div>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/zoom/zoom.min.js"></script>
    <script>
        // 初始化reveal.js
        Reveal.initialize({
            controls: true,
            progress: true,
            center: true,
            hash: true,
            transition: 'convex',
            backgroundTransition: 'slide',
            plugins: [ RevealMarkdown, RevealHighlight, RevealZoom ]
        });
        
        // 初始化Swiper
        document.addEventListener('DOMContentLoaded', function() {
            const swiper = new Swiper('.swiper', {
                loop: true,
                pagination: {
                    el: '.swiper-pagination',
                    clickable: true,
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            });
        });
    </script>
</body>
</html>