中科集团HTML托管
返回管理
编辑页面
页面标题
有效期
7天
30天
90天
修改后将从当前时间重新计算过期时间
CSS文件（可选）
JS文件（可选）
HTML内容
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title>餐饮点餐系统</title> <script src="https://cdn.tailwindcss.com"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, sans-serif; } .page { display: none; height: 100vh; overflow: hidden; flex-direction: column; } .page.active { display: flex; } .btn:active { transform: scale(0.95); } .fade-in { animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .slide-up { animation: slideUp 0.3s ease; } @keyframes slideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } .toast-anim { animation: toastIn 0.3s ease, toastOut 0.3s ease 2.5s forwards; } @keyframes toastIn { from { transform: translateY(-20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes toastOut { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-20px); opacity: 0; } } ::-webkit-scrollbar { width: 4px; } ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 2px; } .category-active { background: linear-gradient(135deg, #FF6B35, #FF8C5A); color: white; } </style> </head> <body class="bg-gray-100"> <!-- ==================== 页面1: 扫码入座 ==================== --> <div id="page-table" class="page active"> <div class="bg-gradient-to-r from-orange-500 to-orange-400 text-white px-4 py-4"> <h1 class="text-xl font-bold">扫码入座</h1> <p class="text-orange-100 text-sm mt-1">扫描桌面二维码开始点餐</p> </div> <div class="p-4"> <button id="btn-scan" class="w-full bg-white rounded-2xl p-4 shadow-lg flex items-center gap-4 border-2 border-dashed border-orange-300"> <div class="w-16 h-16 bg-orange-100 rounded-full flex items-center justify-center"> <i class="fas fa-qrcode text-3xl text-orange-500"></i> </div> <div class="text-left flex-1"> <div class="font-bold text-lg text-gray-800">扫描二维码入桌</div> <div class="text-sm text-gray-500">扫描桌面二维码快速入座</div> </div> <i class="fas fa-chevron-right text-gray-400 text-xl"></i> </button> </div> <div class="flex-1 px-4 pb-4 overflow-auto"> <div class="bg-white rounded-2xl p-4 shadow-lg"> <div class="flex items-center justify-between mb-4"> <h3 class="font-bold text-gray-800">大厅桌台</h3> <div class="flex gap-3 text-xs"> <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-green-500"></span>空闲</span> <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-orange-500"></span>使用中</span> <span class="flex items-center gap-1"><span class="w-3 h-3 rounded bg-purple-500"></span>已预约</span> </div> </div> <div class="grid grid-cols-4 gap-3" id="table-grid"></div> </div> </div> <div class="px-4 py-3 bg-white border-t text-center text-sm text-orange-500"> <i class="fas fa-mobile-alt mr-1"></i>请使用平板扫描桌面二维码入座 </div> </div> <!-- ==================== 页面2: 菜单（侧边栏分类） ==================== --> <div id="page-menu" class="page"> <!-- 顶部 --> <div class="bg-white px-4 py-3 shadow-sm flex items-center gap-3 sticky top-0 z-20"> <button id="btn-back" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center"> <i class="fas fa-arrow-left text-gray-600"></i> </button> <div class="flex-1 bg-gray-100 rounded-full px-4 py-2 flex items-center gap-2"> <i class="fas fa-search text-gray-400"></i> <input type="text" id="search-input" placeholder="搜索菜品..." class="bg-transparent border-none outline-none flex-1"> </div> <button id="btn-cart" class="relative w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center text-white"> <i class="fas fa-shopping-cart"></i> <span id="cart-count" class="absolute -top-1 -right-1 w-5 h-5 bg-red-500 text-white text-xs rounded-full flex items-center justify-center hidden">0</span> </button> </div> <div class="px-4 py-2 bg-white text-sm text-gray-500 flex items-center justify-between"> <div class="flex items-center gap-2"> <i class="fas fa-chair text-orange-500"></i> <span id="table-info">1楼 - A01桌</span> </div> <div id="order-entry" class="hidden"> <button id="btn-to-order" class="text-orange-500 text-sm flex items-center gap-1"> <i class="fas fa-receipt"></i>查看订单 </button> </div> </div> <!-- 侧边栏分类 + 菜品区域 --> <div class="flex-1 flex overflow-hidden"> <!-- 左侧分类导航 --> <div class="w-24 bg-gray-50 overflow-y-auto flex-shrink-0 border-r border-gray-200"> <div id="category-sidebar" class="py-2"></div> </div> <!-- 右侧菜品列表 --> <div class="flex-1 px-3 py-3 overflow-auto"> <div class="grid grid-cols-3 gap-3" id="dish-list"></div> </div> </div> <!-- 悬浮购物车 --> <button id="btn-cart-float" class="fixed bottom-6 right-6 w-16 h-16 bg-gradient-to-br from-orange-500 to-orange-600 rounded-full shadow-xl flex flex-col items-center justify-center text-white z-10"> <i class="fas fa-shopping-cart text-xl"></i> <span id="cart-total" class="text-xs mt-1">0</span> </button> </div> <!-- ==================== 页面3: 购物车 ==================== --> <div id="page-cart" class="page"> <div class="bg-white px-4 py-3 shadow-sm flex items-center justify-between sticky top-0 z-20"> <button id="btn-cart-back" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center"> <i class="fas fa-arrow-left text-gray-600"></i> </button> <h1 class="text-lg font-bold text-gray-800">购物车</h1> <button id="btn-clear" class="text-red-500 text-sm">清空</button> </div> <div class="flex-1 px-4 py-3 overflow-auto"> <div id="cart-items"></div> <div id="cart-empty" class="hidden text-center py-20"> <div class="w-20 h-20 bg-gray-100 rounded-full flex items-center justify-center mx-auto mb-4"> <i class="fas fa-shopping-cart text-3xl text-gray-300"></i> </div> <p class="text-gray-500">购物车是空的</p> <button id="btn-go-menu" class="mt-4 px-6 py-2 bg-orange-500 text-white rounded-full">去点餐</button> </div> </div> <div class="px-4 py-3 bg-white border-t"> <textarea id="order-note" class="w-full border-2 border-gray-200 rounded-xl p-3 text-sm mb-3 resize-none" rows="2" placeholder="订单备注...">
共
0
件
合计：
¥
0.00
提交订单
我的订单
继续点餐
1楼 - A01桌
|
订单号：
DD001
订单状态
待制作
厨房正在准备中
已下单
制作中
待取餐
已完成
制作进度
已点菜品
菜品进度
0/0 完成
已点菜品
0 件
催单
呼叫服务
扫码模拟
请选择扫码后进入的桌台
A01
A02
A03
A04
B01
B02
颜色表示当前桌台状态
¥
0
/份
口味偏好
正常
少辣
微辣
中辣
重辣
备注
数量
-
1
+
小计
¥
0
加入购物车
呼叫服务
加水
结账
纸巾
其他
取消
提示