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>
|