ppt2.html 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>点菜喵 - 餐饮决策智能中枢</title>
  7. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.css">
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/theme/black.min.css">
  9. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  10. <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
  11. <script src="https://cdn.jsdelivr.net/npm/swiper@8.4.5/swiper-bundle.min.js"></script>
  12. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@8.4.5/swiper-bundle.min.css">
  13. <style>
  14. :root {
  15. --primary-color: #9E1F36; /* 故宫红 */
  16. --secondary-color: #0D19A3; /* 量子蓝 */
  17. --accent-color: #00F5C0; /* 数据流绿 */
  18. --text-default-color: #f0f0f0;
  19. --dark-bg: #0a0a1a;
  20. --neon-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color);
  21. }
  22. body {
  23. font-family: 'Arial', 'Microsoft YaHei', sans-serif;
  24. background-color: var(--dark-bg);
  25. color: var(--text-default-color);
  26. }
  27. .reveal {
  28. background: linear-gradient(135deg, var(--dark-bg) 0%, #1a0a1a 100%);
  29. }
  30. .reveal .slides {
  31. text-align: left;
  32. width: 90% !important;
  33. height: 90% !important;
  34. }
  35. /* 封面背景 */
  36. .template-cover {
  37. 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>');
  38. background-size: cover;
  39. position: relative;
  40. overflow: hidden;
  41. }
  42. .template-cover::before {
  43. content: "";
  44. position: absolute;
  45. top: 0;
  46. left: 0;
  47. width: 100%;
  48. height: 100%;
  49. background: radial-gradient(circle at 70% 30%, transparent 0%, var(--primary-color) 70%);
  50. opacity: 0.3;
  51. z-index: 0;
  52. }
  53. .template-cover::after {
  54. content: "";
  55. position: absolute;
  56. bottom: 0;
  57. right: 0;
  58. width: 100%;
  59. height: 100%;
  60. 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;
  61. opacity: 0.2;
  62. z-index: 0;
  63. }
  64. /* 页面背景 */
  65. .template-page {
  66. background: linear-gradient(135deg, rgba(10,10,26,0.9) 0%, rgba(26,10,26,0.9) 100%);
  67. border: 1px solid var(--secondary-color);
  68. box-shadow: var(--neon-shadow);
  69. position: relative;
  70. overflow: hidden;
  71. }
  72. .template-page::before {
  73. display: none;
  74. content: "";
  75. position: absolute;
  76. top: 0;
  77. left: 0;
  78. width: 100%;
  79. height: 100%;
  80. 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>');
  81. opacity: 0.1;
  82. z-index: 0;
  83. }
  84. /* 内容容器 */
  85. .content-box {
  86. position: relative;
  87. z-index: 1;
  88. height: 100%;
  89. padding: 2rem;
  90. display: flex;
  91. flex-direction: column;
  92. justify-content: center;
  93. }
  94. /* 标题样式 */
  95. .reveal h1, .reveal h2, .reveal h3 {
  96. color: var(--primary-color);
  97. text-shadow: 0 0 8px rgba(158, 31, 54, 0.7);
  98. margin-bottom: 1rem;
  99. font-weight: 700;
  100. }
  101. .reveal h1 {
  102. font-size: 3.5rem;
  103. line-height: 1.2;
  104. text-transform: uppercase;
  105. letter-spacing: 3px;
  106. }
  107. .reveal h2 {
  108. font-size: 2.5rem;
  109. border-bottom: 2px solid var(--accent-color);
  110. padding-bottom: 0.5rem;
  111. display: inline-block;
  112. }
  113. .reveal h3 {
  114. font-size: 1.8rem;
  115. color: var(--accent-color);
  116. }
  117. /* 段落样式 */
  118. .reveal p, .reveal li {
  119. color: var(--text-default-color);
  120. font-size: 1.4rem;
  121. line-height: 1.6;
  122. margin-bottom: 1rem;
  123. }
  124. .reveal strong {
  125. color: var(--accent-color);
  126. }
  127. /* 列表样式 */
  128. .reveal ul {
  129. margin-left: 1.5rem;
  130. }
  131. .reveal li {
  132. margin-bottom: 0.8rem;
  133. position: relative;
  134. padding-left: 1.5rem;
  135. }
  136. .reveal li::before {
  137. content: "▹";
  138. position: absolute;
  139. left: 0;
  140. color: var(--accent-color);
  141. }
  142. /* 表格样式 */
  143. .reveal table {
  144. border-collapse: collapse;
  145. width: 100%;
  146. margin: 1.5rem 0;
  147. font-size: 1.2rem;
  148. }
  149. .reveal th {
  150. background-color: rgba(13, 25, 163, 0.5);
  151. color: var(--accent-color);
  152. padding: 0.8rem;
  153. text-align: left;
  154. }
  155. .reveal td {
  156. padding: 0.8rem;
  157. border-bottom: 1px solid rgba(0, 245, 192, 0.2);
  158. }
  159. .reveal tr:nth-child(even) {
  160. background-color: rgba(10, 10, 26, 0.5);
  161. }
  162. /* 特殊元素 */
  163. .neon-text {
  164. text-shadow: 0 0 10px var(--accent-color), 0 0 20px var(--accent-color);
  165. color: white;
  166. }
  167. .pixel-border {
  168. border: 4px solid var(--accent-color);
  169. position: relative;
  170. box-shadow: var(--neon-shadow);
  171. }
  172. .pixel-border::before {
  173. content: "";
  174. position: absolute;
  175. top: -10px;
  176. left: -10px;
  177. right: -10px;
  178. bottom: -10px;
  179. border: 2px solid var(--primary-color);
  180. z-index: -1;
  181. opacity: 0.7;
  182. }
  183. /* 动画效果 */
  184. @keyframes float {
  185. 0%, 100% { transform: translateY(0); }
  186. 50% { transform: translateY(-10px); }
  187. }
  188. @keyframes pulse {
  189. 0%, 100% { opacity: 1; }
  190. 50% { opacity: 0.7; }
  191. }
  192. .float-animation {
  193. animation: float 3s ease-in-out infinite;
  194. }
  195. .pulse-animation {
  196. animation: pulse 2s ease-in-out infinite;
  197. }
  198. /* 封面页样式 */
  199. .cover-container {
  200. display: flex;
  201. flex-direction: column;
  202. justify-content: center;
  203. height: 100%;
  204. padding: 2rem;
  205. position: relative;
  206. }
  207. .logo-container {
  208. position: absolute;
  209. top: 2rem;
  210. right: 2rem;
  211. width: 150px;
  212. height: 150px;
  213. display: flex;
  214. justify-content: center;
  215. align-items: center;
  216. }
  217. .logo {
  218. width: 100%;
  219. height: 100%;
  220. background: radial-gradient(circle, var(--primary-color) 0%, transparent 70%);
  221. border-radius: 50%;
  222. display: flex;
  223. justify-content: center;
  224. align-items: center;
  225. position: relative;
  226. box-shadow: 0 0 30px var(--primary-color);
  227. }
  228. .logo::before, .logo::after {
  229. content: "";
  230. position: absolute;
  231. background-color: var(--accent-color);
  232. border-radius: 50%;
  233. }
  234. .logo::before {
  235. width: 30px;
  236. height: 30px;
  237. top: 20px;
  238. left: 40px;
  239. box-shadow: 0 0 15px var(--accent-color);
  240. }
  241. .logo::after {
  242. width: 30px;
  243. height: 30px;
  244. top: 20px;
  245. right: 40px;
  246. box-shadow: 0 0 15px var(--accent-color);
  247. }
  248. .logo-text {
  249. font-size: 2rem;
  250. font-weight: bold;
  251. color: white;
  252. transform: rotate(-15deg);
  253. text-shadow: 0 0 10px var(--accent-color);
  254. }
  255. /* 目录页样式 */
  256. .mermaid-container {
  257. width: 100%;
  258. height: 70%;
  259. display: flex;
  260. justify-content: center;
  261. align-items: center;
  262. }
  263. .mermaid-node {
  264. width: 200px;
  265. height: 100px;
  266. background: rgba(13, 25, 163, 0.3);
  267. border: 2px solid var(--accent-color);
  268. border-radius: 10px;
  269. display: flex;
  270. flex-direction: column;
  271. justify-content: center;
  272. align-items: center;
  273. margin: 0 1rem;
  274. position: relative;
  275. transition: all 0.3s ease;
  276. cursor: pointer;
  277. }
  278. .mermaid-node:hover {
  279. transform: scale(1.05);
  280. box-shadow: var(--neon-shadow);
  281. background: rgba(13, 25, 163, 0.6);
  282. }
  283. .mermaid-node i {
  284. font-size: 2rem;
  285. margin-bottom: 0.5rem;
  286. color: var(--accent-color);
  287. }
  288. .mermaid-arrow {
  289. position: absolute;
  290. width: 50px;
  291. height: 4px;
  292. background-color: var(--accent-color);
  293. top: 50%;
  294. right: -50px;
  295. }
  296. .mermaid-arrow::after {
  297. content: "";
  298. position: absolute;
  299. right: 0;
  300. top: -6px;
  301. width: 0;
  302. height: 0;
  303. border-left: 10px solid var(--accent-color);
  304. border-top: 8px solid transparent;
  305. border-bottom: 8px solid transparent;
  306. }
  307. /* 痛点页样式 */
  308. .pain-points-container {
  309. display: flex;
  310. flex-direction: column;
  311. height: 100%;
  312. }
  313. .chart-container {
  314. flex: 1;
  315. display: flex;
  316. justify-content: space-between;
  317. margin-top: 1rem;
  318. }
  319. .chart-box {
  320. width: 48%;
  321. height: 100%;
  322. background: rgba(0, 0, 0, 0.3);
  323. border: 1px solid var(--secondary-color);
  324. border-radius: 5px;
  325. padding: 1rem;
  326. }
  327. /* 产品定位页样式 */
  328. .golden-circle-container {
  329. display: flex;
  330. justify-content: space-around;
  331. align-items: center;
  332. height: 70%;
  333. margin-top: 2rem;
  334. }
  335. .circle-item {
  336. width: 25%;
  337. height: 80%;
  338. display: flex;
  339. flex-direction: column;
  340. align-items: center;
  341. justify-content: center;
  342. text-align: center;
  343. position: relative;
  344. }
  345. .circle-why {
  346. border: 4px solid var(--primary-color);
  347. border-radius: 50%;
  348. padding: 2rem;
  349. background: rgba(158, 31, 54, 0.1);
  350. }
  351. .circle-how {
  352. border: 4px solid var(--accent-color);
  353. border-radius: 50%;
  354. padding: 2rem;
  355. background: rgba(0, 245, 192, 0.1);
  356. }
  357. .circle-what {
  358. border: 4px solid var(--secondary-color);
  359. border-radius: 50%;
  360. padding: 2rem;
  361. background: rgba(13, 25, 163, 0.1);
  362. }
  363. .infinity-symbol {
  364. position: absolute;
  365. bottom: -50px;
  366. width: 200px;
  367. height: 100px;
  368. display: flex;
  369. justify-content: center;
  370. align-items: center;
  371. color: var(--accent-color);
  372. font-size: 2rem;
  373. }
  374. /* 功能页样式 */
  375. .feature-container {
  376. height: 80%;
  377. display: flex;
  378. flex-direction: column;
  379. }
  380. .swiper {
  381. width: 100%;
  382. height: 100%;
  383. margin-top: 1rem;
  384. }
  385. .swiper-slide {
  386. background: rgba(10, 10, 26, 0.7);
  387. border: 1px solid var(--secondary-color);
  388. border-radius: 10px;
  389. padding: 1.5rem;
  390. display: flex;
  391. flex-direction: column;
  392. box-shadow: 0 0 15px rgba(0, 245, 192, 0.3);
  393. }
  394. .swiper-slide h3 {
  395. border-bottom: 2px solid var(--accent-color);
  396. padding-bottom: 0.5rem;
  397. margin-bottom: 1rem;
  398. }
  399. /* 技术架构页样式 - 修改部分 */
  400. .tech-architecture {
  401. display: flex;
  402. flex-direction: column;
  403. height: 80%;
  404. overflow-y: auto;
  405. scrollbar-width: thin;
  406. scrollbar-color: var(--accent-color) rgba(0,0,0,0.1);
  407. padding-right: 5px;
  408. }
  409. .tech-architecture::-webkit-scrollbar {
  410. width: 6px;
  411. }
  412. .tech-architecture::-webkit-scrollbar-track {
  413. background: rgba(0,0,0,0.1);
  414. }
  415. .tech-architecture::-webkit-scrollbar-thumb {
  416. background-color: var(--accent-color);
  417. border-radius: 3px;
  418. }
  419. .tech-layer {
  420. min-height: 100px;
  421. height: auto;
  422. padding: 1rem 2rem;
  423. margin: 0.5rem 0;
  424. border-left: 5px solid var(--accent-color);
  425. background: linear-gradient(to right, rgba(0, 245, 192, 0.1), transparent);
  426. position: relative;
  427. transition: all 0.3s ease;
  428. }
  429. .tech-layer:hover {
  430. background: linear-gradient(to right, rgba(0, 245, 192, 0.3), transparent);
  431. box-shadow: 0 0 10px rgba(0, 245, 192, 0.2);
  432. }
  433. .tech-icon {
  434. margin-right: 2rem;
  435. font-size: 2rem;
  436. color: var(--accent-color);
  437. }
  438. /* 商业模式页样式 */
  439. .business-model-container {
  440. height: 80%;
  441. display: flex;
  442. flex-direction: column;
  443. justify-content: center;
  444. align-items: center;
  445. }
  446. .profit-wheel {
  447. width: 300px;
  448. height: 300px;
  449. border-radius: 50%;
  450. border: 3px solid var(--accent-color);
  451. position: relative;
  452. display: flex;
  453. justify-content: center;
  454. align-items: center;
  455. animation: rotate 20s linear infinite;
  456. }
  457. @keyframes rotate {
  458. 0% { transform: rotate(0deg); }
  459. 100% { transform: rotate(360deg); }
  460. }
  461. .wheel-item {
  462. position: absolute;
  463. width: 80px;
  464. height: 80px;
  465. background: rgba(158, 31, 54, 0.7);
  466. border-radius: 50%;
  467. display: flex;
  468. justify-content: center;
  469. align-items: center;
  470. text-align: center;
  471. font-size: 0.9rem;
  472. box-shadow: 0 0 10px var(--primary-color);
  473. }
  474. .wheel-item:nth-child(1) {
  475. top: -40px;
  476. left: 50%;
  477. transform: translateX(-50%);
  478. }
  479. .wheel-item:nth-child(2) {
  480. top: 50%;
  481. right: -40px;
  482. transform: translateY(-50%);
  483. }
  484. .wheel-item:nth-child(3) {
  485. bottom: -40px;
  486. left: 50%;
  487. transform: translateX(-50%);
  488. }
  489. .wheel-item:nth-child(4) {
  490. top: 50%;
  491. left: -40px;
  492. transform: translateY(-50%);
  493. }
  494. .wheel-center {
  495. width: 100px;
  496. height: 100px;
  497. background: var(--primary-color);
  498. border-radius: 50%;
  499. display: flex;
  500. justify-content: center;
  501. align-items: center;
  502. font-size: 1.5rem;
  503. font-weight: bold;
  504. box-shadow: 0 0 20px var(--primary-color);
  505. }
  506. /* 封底页样式 */
  507. .end-container {
  508. display: flex;
  509. flex-direction: column;
  510. justify-content: center;
  511. align-items: center;
  512. height: 100%;
  513. position: relative;
  514. }
  515. .qr-code {
  516. width: 200px;
  517. height: 200px;
  518. background: white;
  519. padding: 10px;
  520. margin: 2rem 0;
  521. position: relative;
  522. }
  523. .qr-code::before {
  524. content: "";
  525. position: absolute;
  526. top: -15px;
  527. left: -15px;
  528. right: -15px;
  529. bottom: -15px;
  530. border: 2px solid var(--accent-color);
  531. z-index: -1;
  532. opacity: 0.7;
  533. }
  534. .cta-buttons {
  535. display: flex;
  536. gap: 2rem;
  537. margin-top: 2rem;
  538. }
  539. .cta-button {
  540. padding: 0.8rem 2rem;
  541. border: none;
  542. border-radius: 5px;
  543. font-size: 1.2rem;
  544. font-weight: bold;
  545. cursor: pointer;
  546. transition: all 0.3s ease;
  547. }
  548. .cta-primary {
  549. background-color: var(--primary-color);
  550. color: white;
  551. box-shadow: 0 0 15px var(--primary-color);
  552. }
  553. .cta-secondary {
  554. background-color: var(--secondary-color);
  555. color: white;
  556. box-shadow: 0 0 15px var(--secondary-color);
  557. }
  558. .cta-button:hover {
  559. transform: translateY(-5px);
  560. box-shadow: 0 0 25px var(--accent-color);
  561. }
  562. /* 响应式调整 */
  563. @media (max-width: 768px) {
  564. .reveal h1 {
  565. font-size: 2.5rem;
  566. }
  567. .reveal h2 {
  568. font-size: 2rem;
  569. }
  570. .golden-circle-container {
  571. flex-direction: column;
  572. height: auto;
  573. }
  574. .circle-item {
  575. width: 80%;
  576. margin-bottom: 2rem;
  577. }
  578. .mermaid-container {
  579. flex-direction: column;
  580. height: auto;
  581. }
  582. .mermaid-node {
  583. margin: 1rem 0;
  584. }
  585. .mermaid-arrow {
  586. width: 4px;
  587. height: 50px;
  588. top: auto;
  589. bottom: -50px;
  590. left: 50%;
  591. transform: translateX(-50%);
  592. }
  593. .mermaid-arrow::after {
  594. right: -6px;
  595. top: auto;
  596. bottom: 0;
  597. border-left: 8px solid transparent;
  598. border-right: 8px solid transparent;
  599. border-top: 10px solid var(--accent-color);
  600. border-bottom: none;
  601. }
  602. /* 移动端技术架构优化 */
  603. .tech-layer {
  604. padding: 0.8rem 1rem;
  605. margin: 0.3rem 0;
  606. min-height: 80px;
  607. }
  608. .tech-icon {
  609. margin-right: 1rem;
  610. font-size: 1.5rem;
  611. }
  612. .tech-layer p {
  613. font-size: 1.2rem;
  614. }
  615. }
  616. /* 新增样式:SWOT分析 */
  617. .swot-container {
  618. display: grid;
  619. grid-template-columns: 1fr 1fr;
  620. grid-template-rows: auto auto;
  621. gap: 1rem;
  622. height: 80%;
  623. }
  624. .swot-quadrant {
  625. border: 2px solid;
  626. border-radius: 8px;
  627. padding: 1rem;
  628. position: relative;
  629. overflow: hidden;
  630. }
  631. .swot-quadrant h3 {
  632. margin-top: 0;
  633. padding-bottom: 0.5rem;
  634. border-bottom: 2px solid;
  635. margin-bottom: 1rem;
  636. }
  637. .strengths {
  638. border-color: var(--accent-color);
  639. }
  640. .weaknesses {
  641. border-color: #FF6B6B;
  642. }
  643. .opportunities {
  644. border-color: #4CAF50;
  645. }
  646. .threats {
  647. border-color: #FF9800;
  648. }
  649. /* 用户场景卡片 */
  650. .user-scene-card {
  651. background: rgba(40,40,60,0.8);
  652. border-radius: 8px;
  653. padding: 1.5rem;
  654. border-left: 4px solid var(--primary-color);
  655. margin-bottom: 1.5rem;
  656. }
  657. .user-profile {
  658. display: flex;
  659. align-items: center;
  660. margin-bottom: 1rem;
  661. }
  662. .user-avatar {
  663. width: 60px;
  664. height: 60px;
  665. border-radius: 50%;
  666. background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
  667. display: flex;
  668. justify-content: center;
  669. align-items: center;
  670. margin-right: 1rem;
  671. font-size: 1.5rem;
  672. }
  673. .kano-model {
  674. display: flex;
  675. justify-content: space-between;
  676. margin-top: 1rem;
  677. }
  678. .kano-item {
  679. width: 30%;
  680. background: rgba(70,70,90,0.6);
  681. padding: 1rem;
  682. border-radius: 6px;
  683. }
  684. .kano-item h4 {
  685. color: var(--accent-color);
  686. margin-top: 0;
  687. }
  688. </style>
  689. </head>
  690. <body>
  691. <div class="reveal">
  692. <div class="slides">
  693. <!-- 封面页 -->
  694. <section class="template-cover">
  695. <div class="cover-container">
  696. <h1 class="neon-text">点菜喵</h1>
  697. <h3 class="neon-text">餐饮决策智能中枢</h3>
  698. <p style="color: var(--accent-color); font-size: 1.8rem; margin-top: 2rem;">用AI重构3000亿点餐市场</p>
  699. <div style="margin-top: 3rem;">
  700. <p style="font-size: 1.2rem; color: rgba(255,255,255,0.7);">AI驱动 · 多模态交互 · 智能调度 · 食安区块链</p>
  701. </div>
  702. <div class="logo-container float-animation">
  703. <div class="logo">
  704. <div class="logo-text">喵</div>
  705. </div>
  706. </div>
  707. </div>
  708. </section>
  709. <!-- 目录页 -->
  710. <section class="template-page">
  711. <div class="content-box">
  712. <h2>三维导航</h2>
  713. <div class="mermaid-container">
  714. <div class="mermaid-node" onclick="Reveal.slide(2);">
  715. <i class="fas fa-chart-line"></i>
  716. <h3>市场分析</h3>
  717. <div class="mermaid-arrow"></div>
  718. </div>
  719. <div class="mermaid-node" onclick="Reveal.slide(3);">
  720. <i class="fas fa-bolt"></i>
  721. <h3>核心痛点</h3>
  722. <div class="mermaid-arrow"></div>
  723. </div>
  724. <div class="mermaid-node" onclick="Reveal.slide(4);">
  725. <i class="fas fa-crosshairs"></i>
  726. <h3>产品定位</h3>
  727. <div class="mermaid-arrow"></div>
  728. </div>
  729. <div class="mermaid-node" onclick="Reveal.slide(5);">
  730. <i class="fas fa-cogs"></i>
  731. <h3>解决方案</h3>
  732. </div>
  733. </div>
  734. </div>
  735. </section>
  736. <!-- 市场环境分析页 -->
  737. <section class="template-page">
  738. <div class="content-box">
  739. <h2>市场环境分析</h2>
  740. <p>PEST模型解析餐饮数字化机遇</p>
  741. <div class="swot-container">
  742. <div class="swot-quadrant strengths">
  743. <h3>政策环境 (Political)</h3>
  744. <ul>
  745. <li>国家推动"互联网+"与服务业数字化转型</li>
  746. <li>食品安全监管强化催生溯源需求</li>
  747. <li>电子发票普及成为合规刚需</li>
  748. <li>反垄断政策鼓励自建点餐渠道</li>
  749. </ul>
  750. </div>
  751. <div class="swot-quadrant opportunities">
  752. <h3>经济环境 (Economic)</h3>
  753. <ul>
  754. <li>餐饮市场规模庞大但竞争激烈</li>
  755. <li>人力、租金成本持续攀升</li>
  756. <li>消费者追求便捷与效率</li>
  757. <li>数字化转型投资增加</li>
  758. </ul>
  759. </div>
  760. <div class="swot-quadrant weaknesses">
  761. <h3>社会环境 (Sociocultural)</h3>
  762. <ul>
  763. <li>移动互联网深度渗透</li>
  764. <li>95后占比超60%的扫码点餐原生用户</li>
  765. <li>健康饮食趋势催生菜品溯源需求</li>
  766. <li>消费习惯向自助化、个性化转变</li>
  767. </ul>
  768. </div>
  769. <div class="swot-quadrant threats">
  770. <h3>技术环境 (Technological)</h3>
  771. <ul>
  772. <li>4G/5G网络为移动点餐提供基础</li>
  773. <li>移动支付技术高度成熟</li>
  774. <li>AI与大数据应用兴起</li>
  775. <li>API生态繁荣促进系统集成</li>
  776. </ul>
  777. </div>
  778. </div>
  779. </div>
  780. </section>
  781. <!-- 核心痛点页 -->
  782. <section class="template-page">
  783. <div class="content-box">
  784. <h2>核心痛点分析</h2>
  785. <p>覆盖全链路角色(顾客、服务员、餐厅管理者、后厨)</p>
  786. <div style="height: 80%; overflow-y: auto; padding-right: 10px;">
  787. <table>
  788. <thead>
  789. <tr>
  790. <th>维度</th>
  791. <th>具体痛点</th>
  792. <th>典型场景表现</th>
  793. <th>量化影响</th>
  794. </tr>
  795. </thead>
  796. <tbody>
  797. <tr>
  798. <td rowspan="3"><strong>顾客体验</strong></td>
  799. <td>等待时间过长</td>
  800. <td>高峰时段排队点餐>15分钟</td>
  801. <td>大部分顾客因等待流失</td>
  802. </tr>
  803. <tr>
  804. <td>信息不透明</td>
  805. <td>菜品售罄后被动告知,过敏源无标注</td>
  806. <td>客诉源于信息差</td>
  807. </tr>
  808. <tr>
  809. <td>个性化需求难满足</td>
  810. <td>定制化口味传达错误,会员权益未识别</td>
  811. <td>客单价降低12%</td>
  812. </tr>
  813. <tr>
  814. <td rowspan="3"><strong>运营效率</strong></td>
  815. <td>人力成本高企</td>
  816. <td>需专职点餐员3名/店(月成本>1.5万)</td>
  817. <td>人力占营收比超22%</td>
  818. </tr>
  819. <tr>
  820. <td>流程协同低效</td>
  821. <td>手写菜单传菜差错率>15%</td>
  822. <td>出餐速度下降40%</td>
  823. </tr>
  824. <tr>
  825. <td>资源调度失衡</td>
  826. <td>无法预测高峰时段备菜量</td>
  827. <td>食材浪费率高达18%</td>
  828. </tr>
  829. <tr>
  830. <td rowspan="3"><strong>管理决策</strong></td>
  831. <td>数据孤岛严重</td>
  832. <td>POS机/外卖平台/会员数据分离</td>
  833. <td>决策延迟导致机会损失</td>
  834. </tr>
  835. <tr>
  836. <td>经营分析盲区</td>
  837. <td>热销菜品与利润菜品混淆</td>
  838. <td>菜单更新失误率>35%</td>
  839. </tr>
  840. <tr>
  841. <td>营销效果难追踪</td>
  842. <td>"满减活动"转化率依赖估算</td>
  843. <td>促销成本浪费45%</td>
  844. </tr>
  845. <tr>
  846. <td rowspan="3"><strong>合规风险</strong></td>
  847. <td>食安溯源缺位</td>
  848. <td>无法提供食材供应商电子台账</td>
  849. <td>违规处罚风险上升200%</td>
  850. </tr>
  851. <tr>
  852. <td>支付安全漏洞</td>
  853. <td>手写记录信用卡信息致泄露</td>
  854. <td>每店年均盗刷损失¥8,000+</td>
  855. </tr>
  856. <tr>
  857. <td>政策响应滞后</td>
  858. <td>发票新规实施后无法即时开电子票</td>
  859. <td>面临停业整改风险</td>
  860. </tr>
  861. </tbody>
  862. </table>
  863. </div>
  864. </div>
  865. </section>
  866. <!-- 用户场景页 -->
  867. <section class="template-page">
  868. <div class="content-box">
  869. <h2>用户场景分析</h2>
  870. <p style="color: var(--accent-color);">用户需求 = 用户画像 × 场景 × 关注目标</p>
  871. <div style="height: 80%; overflow-y: auto; padding-right: 10px;">
  872. <div class="user-scene-card">
  873. <div class="user-profile">
  874. <div class="user-avatar"><i class="fas fa-user-graduate"></i></div>
  875. <div>
  876. <h3>网红店排队体验优化</h3>
  877. <p>18-30岁年轻消费者,热衷社交媒体打卡</p>
  878. </div>
  879. </div>
  880. <p><strong>场景:</strong>网红餐厅现场排队40分钟,无座位、环境嘈杂</p>
  881. <p><strong>关注目标:</strong>缓解焦虑感 + 消磨碎片时间 + 提升期待感</p>
  882. <div class="kano-model">
  883. <div class="kano-item">
  884. <h4>基本需求</h4>
  885. <p>实时预估排队进度(误差≤3分钟)</p>
  886. </div>
  887. <div class="kano-item">
  888. <h4>期望需求</h4>
  889. <p>获取与餐厅相关的文化故事</p>
  890. </div>
  891. <div class="kano-item">
  892. <h4>兴奋需求</h4>
  893. <p>AI生成专属等位剧情(用户自拍+趣味故事)</p>
  894. </div>
  895. </div>
  896. </div>
  897. <div class="user-scene-card">
  898. <div class="user-profile">
  899. <div class="user-avatar"><i class="fas fa-briefcase"></i></div>
  900. <div>
  901. <h3>商务宴请智能策划</h3>
  902. <p>35-50岁企业高管/商务人士,需维护客户关系</p>
  903. </div>
  904. </div>
  905. <p><strong>场景:</strong>接待重要客户前的宴请方案策划</p>
  906. <p><strong>关注目标:</strong>展现文化涵养 + 精准匹配宾客偏好 + 降低决策成本</p>
  907. <div class="kano-model">
  908. <div class="kano-item">
  909. <h4>基本需求</h4>
  910. <p>自动规避甲方公开忌口(如海鲜过敏)</p>
  911. </div>
  912. <div class="kano-item">
  913. <h4>期望需求</h4>
  914. <p>生成可分享的电子宴请笺(附菜品文化解读)</p>
  915. </div>
  916. <div class="kano-item">
  917. <h4>兴奋需求</h4>
  918. <p>席间实时推送「话题弹药」(如东坡肉上菜时触发苏轼冷知识)</p>
  919. </div>
  920. </div>
  921. </div>
  922. <div class="user-scene-card">
  923. <div class="user-profile">
  924. <div class="user-avatar"><i class="fas fa-users"></i></div>
  925. <div>
  926. <h3>个性化选餐决策</h3>
  927. <p>25-45岁家庭/朋友聚餐决策者,有明确忌口</p>
  928. </div>
  929. </div>
  930. <p><strong>场景:</strong>使用美团点餐时面对200+菜品</p>
  931. <p><strong>关注目标:</strong>10分钟内完成点餐 + 确保所有人满意 + 感知菜品价值</p>
  932. <div class="kano-model">
  933. <div class="kano-item">
  934. <h4>基本需求</h4>
  935. <p>强制录入忌口(宗教/过敏/口味)自动屏蔽违规菜品</p>
  936. </div>
  937. <div class="kano-item">
  938. <h4>期望需求</h4>
  939. <p>「一键优化」按钮(按价格/口味/上菜速度重新排序)</p>
  940. </div>
  941. <div class="kano-item">
  942. <h4>兴奋需求</h4>
  943. <p>生成「共识型套餐」(AI解析历史订单:朋友聚餐85%选A+B+C组合)</p>
  944. </div>
  945. </div>
  946. </div>
  947. </div>
  948. </div>
  949. </section>
  950. <!-- 产品定位页 -->
  951. <section class="template-page">
  952. <div class="content-box">
  953. <h2>产品定位</h2>
  954. <p style="color: var(--accent-color);">黄金圈法则:从为什么开始</p>
  955. <div class="golden-circle-container">
  956. <div class="circle-item">
  957. <div class="circle-why">
  958. <h3>WHY</h3>
  959. <p>重构餐饮决策体验</p>
  960. <p>连接顾客与商家的数字化桥梁</p>
  961. <p>让每次点餐都成为幸福感决策</p>
  962. </div>
  963. </div>
  964. <div class="circle-item">
  965. <div class="circle-how">
  966. <h3>HOW</h3>
  967. <ul style="text-align: left; list-style: none; padding: 0;">
  968. <li>AI驱动的智能推荐引擎</li>
  969. <li>多模态交互菜单系统</li>
  970. <li>实时数据分析与决策支持</li>
  971. <li>全链路食品安全溯源</li>
  972. </ul>
  973. </div>
  974. </div>
  975. <div class="circle-item">
  976. <div class="circle-what">
  977. <h3>WHAT</h3>
  978. <ul style="text-align: left; list-style: none; padding: 0;">
  979. <li>顾客端:微信小程序/H5</li>
  980. <li>商家管理端:Web后台</li>
  981. <li>厨显终端:专用设备</li>
  982. <li>三端协同的智能点餐系统</li>
  983. </ul>
  984. </div>
  985. </div>
  986. </div>
  987. <div class="infinity-symbol">
  988. <i class="fas fa-infinity"></i>
  989. </div>
  990. </div>
  991. </section>
  992. <!-- 解决方案页 -->
  993. <section class="template-page">
  994. <div class="content-box">
  995. <h2>解决方案</h2>
  996. <p style="color: var(--accent-color);">端到端的智能点餐生态系统</p>
  997. <div class="feature-container">
  998. <div class="swiper">
  999. <div class="swiper-wrapper">
  1000. <div class="swiper-slide">
  1001. <h3>顾客端功能</h3>
  1002. <ul>
  1003. <li>智能菜单浏览:图文+视频展示菜品</li>
  1004. <li>个性化推荐:基于历史偏好和场景</li>
  1005. <li>多人协作点餐:实时共享购物车</li>
  1006. <li>一键下单支付:支持主流支付方式</li>
  1007. <li>订单实时追踪:从下单到上菜全流程</li>
  1008. </ul>
  1009. </div>
  1010. <div class="swiper-slide">
  1011. <h3>商家管理端</h3>
  1012. <ul>
  1013. <li>菜单智能管理:时段菜单、促销设置</li>
  1014. <li>实时订单看板:状态监控与异常预警</li>
  1015. <li>经营数据分析:热销/利润菜品分析</li>
  1016. <li>会员精准营销:沉睡客户唤醒策略</li>
  1017. <li>库存销量联动:智能采购预测</li>
  1018. </ul>
  1019. </div>
  1020. <div class="swiper-slide">
  1021. <h3>厨显终端系统</h3>
  1022. <ul>
  1023. <li>智能订单分派:基于厨房负载动态调整</li>
  1024. <li>生产进度追踪:实时状态可视化</li>
  1025. <li>食材溯源管理:区块链记录全流程</li>
  1026. <li>异常处理机制:缺货自动通知替换</li>
  1027. <li>绩效数据分析:厨师效率与菜品评价</li>
  1028. </ul>
  1029. </div>
  1030. <div class="swiper-slide">
  1031. <h3>核心技术优势</h3>
  1032. <ul>
  1033. <li>AI推荐引擎:提升客单价19%</li>
  1034. <li>量子调度算法:出餐速度提升40%</li>
  1035. <li>区块链溯源:食品安全零事故</li>
  1036. <li>边缘计算架构:高峰并发99.99%可用</li>
  1037. <li>联邦学习模型:隐私保护下数据共享</li>
  1038. </ul>
  1039. </div>
  1040. </div>
  1041. <div class="swiper-pagination"></div>
  1042. <div class="swiper-button-prev"></div>
  1043. <div class="swiper-button-next"></div>
  1044. </div>
  1045. </div>
  1046. </div>
  1047. </section>
  1048. <!-- 技术架构页 -->
  1049. <section class="template-page">
  1050. <div class="content-box">
  1051. <h2>技术架构</h2>
  1052. <p style="color: var(--accent-color);">分层模型与核心技术栈</p>
  1053. <div class="tech-architecture">
  1054. <div class="tech-layer">
  1055. <div class="tech-icon"><i class="fas fa-brain"></i></div>
  1056. <div>
  1057. <h3>智能层</h3>
  1058. <p>AI推荐引擎 · 负荷预测模型 · 情感计算 · 计算机视觉</p>
  1059. <p style="font-size: 1.3rem; color: var(--accent-color);">TensorFlow/PyTorch · OpenCV · 自研算法</p>
  1060. <p>多模态学习模型融合菜品特征、用户画像和环境因素</p>
  1061. </div>
  1062. </div>
  1063. <div class="tech-layer">
  1064. <div class="tech-icon"><i class="fas fa-project-diagram"></i></div>
  1065. <div>
  1066. <h3>业务层</h3>
  1067. <p>订单管理 · 支付网关 · 库存调度 · 会员系统</p>
  1068. <p style="font-size: 1.3rem; color: var(--accent-color);">Spring Cloud · Kafka · Redis · MySQL</p>
  1069. <p>分布式事务处理保证订单一致性</p>
  1070. </div>
  1071. </div>
  1072. <div class="tech-layer">
  1073. <div class="tech-icon"><i class="fas fa-database"></i></div>
  1074. <div>
  1075. <h3>数据层</h3>
  1076. <p>实时数仓 · 知识图谱 · 区块链 · 联邦学习</p>
  1077. <p style="font-size: 1.3rem; color: var(--accent-color);">Hadoop · Neo4j · Hyperledger · FATE</p>
  1078. <p>食安区块链实现全流程可追溯</p>
  1079. </div>
  1080. </div>
  1081. <div class="tech-layer">
  1082. <div class="tech-icon"><i class="fas fa-server"></i></div>
  1083. <div>
  1084. <h3>基础设施层</h3>
  1085. <p>容器化部署 · 微服务架构 · 负载均衡 · 自动扩缩容</p>
  1086. <p style="font-size: 1.3rem; color: var(--accent-color);">Kubernetes · Docker · AWS/GCP</p>
  1087. <p>高可用架构保证99.99%服务可用性</p>
  1088. </div>
  1089. </div>
  1090. </div>
  1091. </div>
  1092. </section>
  1093. <!-- 商业模式页 -->
  1094. <section class="template-page">
  1095. <div class="content-box">
  1096. <h2>商业模式</h2>
  1097. <p style="color: var(--accent-color);">盈利飞轮与市场策略</p>
  1098. <div class="business-model-container">
  1099. <div class="profit-wheel">
  1100. <div class="wheel-item" style="top: -40px; left: 50%; transform: translateX(-50%);">SAAS订阅</div>
  1101. <div class="wheel-item" style="top: 50%; right: -40px; transform: translateY(-50%);">交易佣金</div>
  1102. <div class="wheel-item" style="bottom: -40px; left: 50%; transform: translateX(-50%);">数据服务</div>
  1103. <div class="wheel-item" style="top: 50%; left: -40px; transform: translateY(-50%);">增值功能</div>
  1104. <div class="wheel-center">点菜喵</div>
  1105. </div>
  1106. <div style="margin-top: 3rem; width: 80%;">
  1107. <h3>市场进入策略</h3>
  1108. <div style="display: flex; justify-content: space-around; margin-top: 1rem;">
  1109. <div style="text-align: center;">
  1110. <p style="color: var(--accent-color); font-size: 1.5rem;">高端餐厅</p>
  1111. <p>标杆案例打造</p>
  1112. </div>
  1113. <div style="text-align: center;">
  1114. <p style="color: var(--accent-color); font-size: 1.5rem;">连锁品牌</p>
  1115. <p>规模化部署</p>
  1116. </div>
  1117. <div style="text-align: center;">
  1118. <p style="color: var(--accent-color); font-size: 1.5rem;">下沉市场</p>
  1119. <p>轻量版普及</p>
  1120. </div>
  1121. </div>
  1122. </div>
  1123. </div>
  1124. </div>
  1125. </section>
  1126. <!-- 项目团队页 -->
  1127. <section class="template-page">
  1128. <div class="content-box">
  1129. <h2>项目团队</h2>
  1130. <p style="color: var(--accent-color);">专业多元的核心执行团队</p>
  1131. <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem;">
  1132. <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center;">
  1133. <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
  1134. <h3>贺子权 0235646</h3>
  1135. <p>产品负责人</p>
  1136. </div>
  1137. <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center;">
  1138. <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
  1139. <h3>严燕 0235648</h3>
  1140. <p>技术架构师</p>
  1141. </div>
  1142. <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center;">
  1143. <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
  1144. <h3>吴智超 0235615</h3>
  1145. <p>后端开发</p>
  1146. </div>
  1147. <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center;">
  1148. <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
  1149. <h3>廖仓 0235614</h3>
  1150. <p>前端开发</p>
  1151. </div>
  1152. <div style="background: rgba(40,40,60,0.8); border-radius: 8px; padding: 1.5rem; text-align: center; grid-column: span 2;">
  1153. <div class="user-avatar" style="margin: 0 auto 1rem;"><i class="fas fa-user"></i></div>
  1154. <h3>喻妍 02356</h3>
  1155. <p>UI/UX设计师</p>
  1156. </div>
  1157. </div>
  1158. </div>
  1159. </section>
  1160. <!-- 封底页 -->
  1161. <section class="template-cover">
  1162. <div class="end-container">
  1163. <h2 class="neon-text">开启智能餐饮新时代</h2>
  1164. <p style="font-size: 1.5rem; color: var(--accent-color);">点菜喵 - 餐饮决策智能中枢</p>
  1165. <div class="qr-code float-animation">
  1166. <div style="width: 100%; height: 100%; background: #fff; display: flex; justify-content: center; align-items: center; font-size: 1rem; color: #000; text-align: center;">
  1167. 点菜喵<br>小程序二维码
  1168. </div>
  1169. </div>
  1170. <div class="cta-buttons">
  1171. <button class="cta-button cta-primary">立即体验</button>
  1172. <button class="cta-button cta-secondary">商务合作</button>
  1173. </div>
  1174. <p style="position: absolute; bottom: 1rem; font-size: 1rem; color: rgba(255,255,255,0.7);">
  1175. 项目团队:贺子权 · 严燕 · 吴智超 · 廖仓 · 喻妍
  1176. </p>
  1177. </div>
  1178. </section>
  1179. </div>
  1180. </div>
  1181. <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/reveal.min.js"></script>
  1182. <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/markdown/markdown.min.js"></script>
  1183. <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/highlight/highlight.min.js"></script>
  1184. <script src="https://cdnjs.cloudflare.com/ajax/libs/reveal.js/4.3.1/plugin/zoom/zoom.min.js"></script>
  1185. <script>
  1186. // 初始化reveal.js
  1187. Reveal.initialize({
  1188. controls: true,
  1189. progress: true,
  1190. center: true,
  1191. hash: true,
  1192. transition: 'convex',
  1193. backgroundTransition: 'slide',
  1194. plugins: [ RevealMarkdown, RevealHighlight, RevealZoom ]
  1195. });
  1196. // 初始化Swiper
  1197. document.addEventListener('DOMContentLoaded', function() {
  1198. const swiper = new Swiper('.swiper', {
  1199. loop: true,
  1200. pagination: {
  1201. el: '.swiper-pagination',
  1202. clickable: true,
  1203. },
  1204. navigation: {
  1205. nextEl: '.swiper-button-next',
  1206. prevEl: '.swiper-button-prev',
  1207. },
  1208. });
  1209. });
  1210. </script>
  1211. </body>
  1212. </html>