|
|
@@ -0,0 +1,1356 @@
|
|
|
+<!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>
|
