/* Carta · 结构样式层：布局/组件/响应式。 */ * { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* ===== Global Button Tap Feedback ===== */ @keyframes btnFlash { 0% { filter: brightness(1); } 50% { filter: brightness(1.25); } 100% { filter: brightness(1); } } @keyframes btnRipple { 0% { box-shadow: 0 0 0 0 rgba(232,93,58,0.35); } 100% { box-shadow: 0 0 0 10px rgba(232,93,58,0); } } button, .hub-link, [onclick], [role="button"] { transition: opacity .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease, transform .12s ease, filter .12s ease, box-shadow .12s ease; } button:active, .hub-link:active, [onclick]:active, [role="button"]:active { opacity: 0.6; } /* 移动端触摸反馈：:active 在手机上不可靠，由 app.js 的 touch 监听加 .tapping 兜底 */ .tapping { opacity: 0.55 !important; } /* 全屏遮罩弹窗：按住弹窗内任意处，容器（祖先）也会进入 :active，若不屏蔽会导致整个弹窗跟着变淡/缩。 ① 容器自身 :active 不做任何反馈（不变淡/不缩/不变暗）； ② 弹窗内所有元素禁止缩放（防残留 transform 连带缩窗），内部按钮的「按住变淡」反馈保留。 attr-mask 系列用类名覆盖，新增同类无需改这里；其余 overlay/modal 用 id 列举，新增时各补一行。 */ .attr-mask:active, #siteDisabledOverlay:active, #pinOverlay:active, #successOverlay:active, #orderPinOverlay:active, #aboutModal:active, #transferOverlay:active, #seatsOverlay:active, #tableMenuOverlay:active, #tableFilterOverlay:active, #dishDescModal:active, #confirmModal:active, #promptModal:active, #allergenPickerOverlay:active, #allergenAdminOverlay:active, #tabPinOverlay:active, #smPickerOverlay:active, #entryPinOverlay:active { opacity: 1 !important; transform: none !important; filter: none !important; } /* v499：加 :not(.jelly-play) —— CSS 规范里【!important 声明优先级高于动画】， 原规则会在按住时把果冻动画的 transform 清零，导致弹窗内按钮的果冻「看不见」（Jay 报）。 排除正在播果冻的元素即可，其余「弹窗内禁止缩放」的原意完全保留。 */ .attr-mask *:active:not(.jelly-play), #siteDisabledOverlay *:active:not(.jelly-play), #pinOverlay *:active:not(.jelly-play), #successOverlay *:active:not(.jelly-play), #orderPinOverlay *:active:not(.jelly-play), #aboutModal *:active:not(.jelly-play), #transferOverlay *:active:not(.jelly-play), #seatsOverlay *:active:not(.jelly-play), #tableMenuOverlay *:active:not(.jelly-play), #tableFilterOverlay *:active:not(.jelly-play), #dishDescModal *:active:not(.jelly-play), #confirmModal *:active:not(.jelly-play), #promptModal *:active:not(.jelly-play), #allergenPickerOverlay *:active:not(.jelly-play), #allergenAdminOverlay *:active:not(.jelly-play), #tabPinOverlay *:active:not(.jelly-play), #smPickerOverlay *:active:not(.jelly-play), #entryPinOverlay *:active:not(.jelly-play) { transform: none !important; } /* v401：纯挡冒泡容器（onclick 恰好 = event.stopPropagation() 的弹窗盒子/包裹层）按住不给任何反馈—— 它只拦点击、从不是真按钮。之前它匹配全局 [onclick]:active 与 .tapping 而变半透明（Jay 报「按住关于弹框变淡」）。 用【精确串】匹配：event.stopPropagation();attrPickCount(…) 这类"挡冒泡+真动作"的按钮不是精确匹配，反馈照常保留。 */ [onclick="event.stopPropagation()"]:active { opacity: 1 !important; transform: none !important; filter: none !important; } [onclick="event.stopPropagation()"].tapping { opacity: 1 !important; } /* v488：+/− 原来是「透明度压淡 + 0.35s 扩散阴影涟漪」＝ Jay 说的快闪。 改为【按住变暗、松手恢复】：动作按钮无选中态，需要明确按压反馈。 */ html, body { overscroll-behavior-y: none; } body { font-family: 'Noto Sans SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', sans-serif; background: var(--bg); color: var(--text); min-height: 100dvh; } /* 🔒 v590 根治「底部多出一整屏空白」——顾客端文档滚动锁（由 setupCustomer 挂 .doc-lock）。 病理：v361/v362/v380/v431 四代药全是【自愈型】——允许文档滚动器活着，等浏览器把滚动范围 撑开后再掰回来，故永远存在一个「已经看见空白」的窗口期，治标不治本。 🧹 v629：本锁成立后那四代自愈药在顾客端已整体删除（它们每次回前台要强制四次同步重排）。 根修：把这个自由度直接删掉。按 CSS 规范，html 的 overflow 为 visible 时，body 的 overflow 会被【传播到视口】→ 文档滚动范围硬钳为 0。浏览器还原过期 scrollY 也好、长锁屏后合成器带坏 状态回来也好，都没有可撑开的范围 → 空白无处可生。 ✅ 安全性已逐页核验：顾客端四页与全部弹层早在 v97/v118 起就是 position:fixed 定高内层滚动 （#pageCustomerHome.active / .menu-layout / .myorders-scroll / .attr-mask 等 inset:0）， 文档滚动器纯属摆设 → 加锁零视觉变化、零行为变化（地址栏本来就不会收起，因为本来就没在滚）。 🚨 绝不可挂到柜台/编辑端：#pageHome/#pageMenuEdit/#pageTranslate/#pageSettings/#pageComboEdit 是真·文档流滚动页，锁死会让整页滚不动。故用类名按角色限定，不写进 body 基础规则。 */ body.doc-lock { height: 100dvh; overflow: hidden; overscroll-behavior: none; } /* ===== NAV ===== */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); background: var(--card); border-bottom: 1px solid var(--border); display: flex; align-items: center; padding: 0 12px; /* v370：16 → 12，把 8px 还给店名（Jay：字号不动，把显示区拉长） */ box-shadow: 0 1px 4px rgba(0,0,0,0.04); } /* v371：页头左侧容器（标题 + 店铺徽章绑在一起）。 .kitchen-header h2 本身带 margin-right:auto——徽章若直接跟在 h2 后面会被推到最右、和按钮挤在一起。 包一层「内容宽度」的 flex 容器并把 auto 外边距移到容器上，徽章才紧贴标题；其余 kitchen-header 一律不受影响。 */ .hdr-l { display: flex; align-items: center; gap: 10px; margin-right: auto; min-width: 0; } .hdr-l h2 { margin-right: 0; } /* 🈯 v372 基准语言徽章 + 导入面板语言列声明。 基准语言决定文本模板【第 1 列是哪种语言】。它错了不会报错——只会让整列译文静默串到别的语言上， 等顾客看到西语菜名变成中文才发现（Jay）。所以它必须在两个地方都醒目： ① 编辑页头常驻徽章（导入面板是折叠的
，不点开看不见，而"照模板直接导"恰恰最危险） ② 导入面板顶部的列顺序声明 + 警告。 */ .base-tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--green-light); color: var(--green); border: 1px solid color-mix(in srgb, var(--green) 35%, transparent); white-space: nowrap; flex: 0 0 auto; } .lang-spec { font-size: 12.5px; line-height: 1.75; margin: 10px 0; padding: 10px 12px; border-radius: 8px; background: var(--accent-light); border-left: 3px solid var(--accent); color: var(--text); } .lang-spec b { color: var(--accent); } .lang-spec .warn { display: block; margin-top: 6px; color: var(--text-sub); font-size: 11.5px; } /* 🏪 v371 店铺徽章：菜品/翻译/套餐三个编辑页的页头，恒显当前店铺名。 超管常同时开五家店的标签页，进了编辑器却看不出这是谁家的菜单——改错一家就是真事故（Jay）。 `.admin-only` 使其仅对 hub 可见（boot 对非 hub 角色统一隐藏），柜台/编辑端界面零变化。 */ .store-tag { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--accent-light); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; flex: 0 1 auto; min-width: 0; } nav .logo { font-size: 18px; font-weight: 700; color: var(--accent); margin-right: auto; display: flex; align-items: center; gap: 6px; /* v370：8 → 6 */ min-width: 0; /* v366：解锁收缩，否则 flex 子项默认 min-width:auto 会顶开导航栏 */ flex: 1 1 auto; /* v370：占满导航栏剩余宽度（顾客端标签区为空，全部归店名） */ } /* v366 店名【绝不换行】：长店名一律单行 + 省略号。原来没有任何 nowrap/overflow 规则， 店名一长就折行，把 56px 的导航栏撑成两行、顶掉下面的内容（Jay 报障）。 */ nav .logo #navTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } /* v366 店名图片（艺术字标）：与 logo 同一套等比缩放约束，任何比例都不变形、不超高 */ nav .logo #navNameImg { max-height: 42px; max-width: 180px; width: auto; height: auto; display: none; object-fit: contain; flex-shrink: 0; } nav .logo svg { width: 24px; height: 24px; } /* v365 导航栏 logo：30px → 42px 高（导航栏 56px，上下各留 7px 呼吸），宽上限 90 → 120px。 复杂 logo 在 30px 高度下细节糊成一团，而导航栏的垂直空间本来就是空着的。 ⚠️ 同时修掉一个既有缺陷：原来写死 `height:30px` + `max-width:90px` —— 宽形 logo（横版字标） 宽度被砍到 90px、高度却仍钉在 30px，图会被【横向压扁】。改用 max-height + max-width + 双 auto： 替换元素按固有宽高比等比缩放至同时满足两个上限，不再变形。 */ nav .logo #navLogo { max-height: 42px; max-width: 96px; width: auto; height: auto; display: block; object-fit: contain; flex-shrink: 0; } /* v370：宽上限 120 → 96，只影响【宽形字标】；方形 logo 渲染宽仅 42px，高度 42px 一分不减 */ /* v139 规范②条款：.tabs 是 nav 的 flex 子项，默认 min-width:auto 拒绝收缩会把最右 tab 推出屏——解锁后内部规则才生效 */ nav .tabs { display: flex; gap: 4px; flex: 0 1 auto; min-width: 0; } nav .tab { padding: 8px 16px; border-radius: 8px; font-size: 14px; font-weight: 500; border: none; background: none; color: var(--text-sub); cursor: pointer; transition: all .2s; touch-action: manipulation; } nav .tab.active { background: var(--accent); color: #fff; } nav .tab:not(.active):hover { background: var(--accent-light); color: var(--accent); } /* ===== PAGES ===== */ .page { display: none; padding-top: calc(var(--nav-h) + 16px); padding-bottom: 140px; min-height: 100dvh; } .page.active { display: block; } /* 🧭 v516（Jay 报：手机/iPad 柜台端在【餐桌页】向下滑，顶部导航会跟着往下移一段再弹回）。 真因：餐桌页是普通文档流页面（.page），滚动发生在 document 上；iOS 的文档级橡皮筋 会把 position:fixed 的 nav 一起拖走 —— 正是 .menu-list 注释里点名的「当年导航漂移 bug」。 html/body 虽已有 overscroll-behavior-y:none，但在 iOS 上挡不住这条（顾客端之所以没事， 是因为那边滚动本就关在 .menu-list / .myorders-scroll 等定高容器里，body 根本不滚）。 解法沿用 v97/v118 经 Jay 真机验收的方案（勿再改回文档滚动）： body 不滚 → 定高内层滚动区 + overscroll-behavior:contain，回弹关在容器内，导航纹丝不动。 · min-height 必须归 0：.page 的 min-height:100dvh 会把这个 top/bottom 已定高的容器撑破出视口。 · padding-top 收为 16px：位置已由 top:var(--nav-h) 决定，再叠 .page 那份就重复留白。 · padding-bottom 沿用 .page 的 140px 不动，保住右下角悬浮按钮的避让空间。 · 桌面端 .page:not(...) 的 max-width:600px + margin:auto 仍生效（fixed + left/right:0 下照样居中）。 */ #pageTables.active { position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: 16px; } /* 还有未完成订单时：员工端整页泛起暖色，全部完成自动退回中性（背景氛围提醒） */ body { transition: background-color .5s ease; } body.has-pending { background-color: #FDECC8; } body.has-pending .page { background-color: #FDECC8; transition: background-color .5s ease; } body.has-pending .kitchen-header { background-color: #FDECC8; transition: background-color .5s ease; } /* ===== TEST HUB ===== */ /* ===== 超管侧栏控制台 ===== */ #pageHub { padding: 0; } .ac-wrap { display:flex; flex-direction:column; height:100vh; overflow:hidden; } .ac-top { position:sticky; top:0; z-index:40; display:flex; align-items:center; gap:12px; padding:12px 18px; background:var(--card); border-bottom:1px solid var(--border); } .ac-logo { display:flex; align-items:center; gap:9px; font-weight:800; font-size:15px; white-space:nowrap; } /* v367/v368：后台品牌标识 = 奇妙 logo（原为 ⚡ emoji 占位）。 v368：去掉橙色底板与内边距——那个橙底是 App 图标（手机主屏）的需要，后台不需要；这里只要 logo 本身。 深色后台上：灯泡的黄 + 灯座的白足以立住，无需底板。 */ .ac-logo .z { width:30px; height:30px; background:none; padding:0; display:grid; place-items:center; flex:0 0 auto; } .ac-top .sp { flex:1; } .ac-pick { display:inline-flex; align-items:center; gap:6px; background:var(--bg); border:1px solid var(--border); border-radius:9px; padding:6px 10px; font-size:13px; font-weight:600; } .ac-pick select { font:inherit; font-weight:600; border:0; background:transparent; color:var(--text); cursor:pointer; outline:none; max-width:42vw; } .ac-chip { font-size:11.5px; font-weight:700; padding:4px 11px; border-radius:20px; white-space:nowrap; } .ac-chip.on { background:var(--green-light); color:var(--green); } .ac-chip.off { background:#FDECEC; color:#e53e3e; } .ac-l1 { display:grid; grid-template-columns:214px 1fr; flex:1; min-height:0; overflow:hidden; } .ac-rail { border-right:1px solid var(--border); padding:14px 12px; background:#FCFBF9; overflow-y:auto; } .ac-grp { display:flex; align-items:center; gap:6px; font-size:10px; font-weight:800; letter-spacing:.12em; color:var(--gc,var(--text-sub)); padding:14px 9px 6px; } .ac-grp::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gc,var(--text-sub)); flex:0 0 auto; } .ac-grp:first-child { padding-top:2px; } .ac-grp.danger-grp { margin-top:10px; padding-top:14px; border-top:1px solid var(--border); } .ac-nav { display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:10px; cursor:pointer; color:var(--text-sub); font-weight:600; font-size:13px; border:1px solid transparent; user-select:none; transition:background .14s ease, border-color .14s ease; } .ac-nav.primary { font-weight:700; } .ac-nav .ic { width:24px; height:24px; border-radius:7px; display:grid; place-items:center; font-size:13px; background:var(--surface); background:color-mix(in srgb, var(--ac,var(--accent)) 15%, transparent); border:1px solid var(--border); border-color:color-mix(in srgb, var(--ac,var(--accent)) 30%, transparent); flex:0 0 auto; } .ac-nav:hover { background:var(--surface); background:color-mix(in srgb, var(--ac,var(--accent)) 9%, transparent); color:var(--text); } .ac-nav.on { background:var(--card); color:var(--text); border-color:var(--ac,var(--accent)); box-shadow:var(--shadow); } .ac-nav.on .ic { background:var(--ac,var(--accent)); border-color:transparent; color:#fff; } .ac-content { padding:22px clamp(16px,2.4vw,28px); overflow-y:auto; } .ac-area { display:none; } .ac-area.on { display:block; } .ac-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; } .ac-head .ic { width:42px; height:42px; border-radius:11px; display:grid; place-items:center; font-size:20px; flex:0 0 auto; } .ac-head h3 { font-size:17px; font-weight:700; margin:0; } .ac-head .d { font-size:12px; color:var(--text-sub); margin-top:2px; } .ac-panel { background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:18px; box-shadow:var(--shadow); } .ac-panel.danger { border-color:#f3b6b6; background:#FFFBFB; } .ac-panel h3 { font-size:15px; margin-bottom:6px; } .ac-stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(120px,1fr)); gap:12px; } .ac-stat { background:var(--card); border:1px solid var(--border); border-radius:13px; padding:14px 16px; box-shadow:var(--shadow); } .ac-stat .v { font-size:26px; font-weight:800; } .ac-stat .k { font-size:12px; color:var(--text-sub); margin-top:2px; } @media (max-width:720px) { .ac-wrap { height:auto; overflow:visible; } .ac-l1 { grid-template-columns:1fr; overflow:visible; } .ac-rail { display:flex; gap:6px; overflow-x:auto; border-right:0; border-bottom:1px solid var(--border); position:sticky; top:57px; z-index:30; padding:10px 12px; } .ac-grp { display:none; } .ac-nav { flex:0 0 auto; white-space:nowrap; } } .desc { font-size: 13px; color: var(--text-sub); margin-bottom: 14px; line-height: 1.5; } .link-row { display: flex; gap: 8px; flex-wrap: wrap; } .hub-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 8px; border: none; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; transition: all .15s; touch-action: manipulation; } .hub-link.orange { background: var(--accent); color: #fff; } .hub-link.dark { background: var(--text); color: #fff; } .hub-link.green { background: var(--green); color: #fff; } /* v623：类名在 HTML 里用了很久，样式却一直不存在 → 「➕ 新增店铺」是个纯透明按钮 */ .hub-link.outline { background: none; border: 1.5px solid var(--border); color: var(--text); } /* v623：面板底色上的「添加一项」按钮。不能用 .me-btn —— 它底色是 var(--card)， 与面板同色 = 隐形（本条规则见 AI_NOTES「UI 铁律 5」）。这里比面板暗一档 + accent 描边。 */ .add-row-btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:8px; background: var(--surface); border: 1.5px dashed var(--accent); color: var(--accent); font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; touch-action:manipulation; } .hub-link.st-on { background: #10B981 !important; border-color: #10B981 !important; color: #fff !important; } .hub-link.st-off { background: #EF4444 !important; border-color: #EF4444 !important; color: #fff !important; } /* ===== PIN OVERLAY ===== */ .pin-overlay { position: fixed; inset: 0; z-index: 999; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; } .pin-box { background: var(--card); border-radius: 16px; padding: 32px; width: 320px; box-shadow: var(--shadow-lg); text-align: center; } .pin-box h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; } .pin-box p { font-size: 13px; color: var(--text-sub); margin-bottom: 20px; } .pin-input { width: 100%; padding: 14px; border: 2px solid var(--border); border-radius: 10px; font-size: 24px; font-family: inherit; text-align: center; letter-spacing: 8px; margin-bottom: 16px; transition: border-color .2s; } .pin-input:focus { outline: none; border-color: var(--accent); } .pin-input.error { border-color: #e53e3e; animation: shake .4s ease; } /* 🎫 v488 登录名额已满：副标题转红并放宽行距（这条文案是两行的长句， 必须留在屏幕上而不是用 toast —— 店员回头再看时还得看得见原因）。 */ .pin-box p.pin-err { color: #e53e3e; font-weight: 600; line-height: 1.5; } @keyframes shake { 20%,60% { transform: translateX(-6px); } 40%,80% { transform: translateX(6px); } } .pin-submit { width: 100%; padding: 14px; border-radius: 10px; border: none; background: var(--accent); color: #fff; font-size: 16px; font-weight: 700; cursor: pointer; touch-action: manipulation; } @keyframes popIn { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .cart-float { position: fixed; bottom: 76px; left: auto; right: 16px; z-index: 90; background: var(--text); color: #fff; border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow-lg); display: none; align-items: center; gap: 12px; animation: slideUp .3s ease; width: fit-content; max-width: calc(100vw - 32px); } .cart-float.show { display: flex; /* v400：给这条固定悬浮下单条一块独立稳定的合成层。手机快速甩动菜单、主线程一卡时， 合成器会给没有自有图层的 fixed 元素贴上错误的滚动补偿 transform → 视觉上「向右上飞走消失」。 仅 .show（购物车有货）时提层，隐藏时不留常驻图层，符合合成器减压纪律。 */ transform: translateZ(0); } @keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* 单条「查看购物车」浮条：整条可点 → 打开购物车弹层 */ .cart-bar-btn { flex: 1; display: flex; align-items: center; gap: 12px; background: none; border: 0; color: #fff; font: inherit; text-align: left; cursor: pointer; padding: 0; touch-action: manipulation; min-width: 0; } .cart-bar-btn:active, .cart-bar-btn.tapping { opacity: 1 !important; filter: brightness(.9); } .cb-info { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; white-space: nowrap; display: flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1.2; } .cb-info .cb-line { white-space: nowrap; } .cb-cart { flex: 0 0 auto; background: rgba(255,255,255,0.14); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 13px; border-radius: 10px; white-space: nowrap; } .cb-cart:active, .cb-cart.tapping { opacity: 1 !important; filter: brightness(.9); } .cb-order { flex: 0 0 auto; margin-left: 8px; border: 0; font-family: inherit; background: var(--accent); color: #fff; cursor: pointer; touch-action: manipulation; font-size: 14px; font-weight: 800; padding: 9px 18px; border-radius: 10px; white-space: nowrap; letter-spacing: .3px; } .cb-order:active, .cb-order.tapping { opacity: 1 !important; background: var(--accent-dark); } /* ===== 点餐菜单布局 ===== */ .menu-layout { display: flex; gap: 0; margin: 0; flex: 1; height: calc(100dvh - var(--nav-h) - 52px); position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 52px; /* customer bottom nav */ } /* 分类栏 — 固定左侧，独立滚动但由代码控制 */ .cat-bar { width: 88px; flex-shrink: 0; background: #F0EFEC; display: flex; flex-direction: column; gap: 2px; padding: 6px 0; overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; } .cat-bar::-webkit-scrollbar { display: none; } .cat-btn { padding: 14px 6px; border: none; background: none; font-size: 13px; font-weight: 500; color: var(--text-sub); cursor: pointer; text-align: center; transition: all .15s; border-left: 3px solid transparent; touch-action: manipulation; line-height: 1.3; white-space: normal; overflow-wrap: normal; min-width: 0; position: relative; } .cat-btn .cat-emoji { position: absolute; top: 2.5px; left: 2.5px; line-height: 1; pointer-events: none; font-size: 13px; /* v607：原由 .tw-emoji img 宽高 13px 控制，改用原生 emoji 后由字号控制 */ } .cat-btn .cat-text { display: block; } .cat-btn.active { background: var(--card); color: var(--accent); border-left-color: var(--accent); } /* v488：分类（含套餐分类 .cat-btn-combo）有 .active 选中外框 → 按压零反馈 */ .cat-btn:active, .cat-btn.tapping { opacity: 1 !important; background: inherit; } /* 菜品列表 — 唯一滚动区域 */ .menu-list { flex: 1; padding: 0 12px 160px 12px; overflow-y: auto; /* ★ v118 恢复 v97 真机验收方案（勿再改回 none！）： 精炼规则 = html/body 与所有弹层 sheet 保持 none（挡文档级回弹=当年导航漂移 bug 的源头）； 但「定高内层滚动区 + body 不滚」的三处（菜单列表/我的订单/顾客主页）用 contain—— 橡皮筋回弹关在容器内，导航与背景纹丝不动。Jay 真机验收通过（v97）。 切语言后的滚动高度异常由 app.js 的 clamp 兜底（见「根治」注释处）。 */ overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* 订单历史页：与菜单页同款——滚动关在内部定高容器里，body 不滚，避免手机地址栏收起/全屏效果 */ .myorders-scroll { position: fixed; top: var(--nav-h); left: 0; right: 0; height: calc(100dvh - var(--nav-h) - 52px); /* ★ v118：有界内层滚动区用 contain（回弹关在容器内），见 .menu-list 处的精炼规则 */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .myorders-inner { max-width: 600px; margin: 0 auto; padding: 16px 16px calc(40px + env(safe-area-inset-bottom, 0px)); } .menu-cat-title { font-size: 16px; font-weight: 700; padding: 16px 4px 10px; color: var(--text); position: sticky; top: 0; background: var(--bg); z-index: 2; } .cat-closed-banner { margin: 0 4px 10px; padding: 8px 12px; border-radius: 8px; background: #FEF9C3; color: #92660A; border: 1px solid #FDE68A; font-size: 13px; font-weight: 700; } /* v607：Twemoji 已移除，改用系统原生 emoji（天然随字号缩放，无需额外规则） */ /* 菜品卡片 */ .dish-card { display: flex; gap: 12px; padding: 12px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 10px; align-items: center; } .dish-img { width: 80px; height: 80px; border-radius: 10px; background: #EEECEA; flex-shrink: 0; position: relative; display: flex; align-items: center; justify-content: center; font-size: 45px; /* v607：原 32px 容器 + .tw-emoji img 1.4em = 44.8px；改原生 emoji 后由此字号直接控制 */ overflow: hidden; } .dish-img img { width: 100%; height: 100%; object-fit: cover; } /* v460：点单端点菜品图放大时同样去掉半透明白层——.dish-img 带 onclick，命中全局 [onclick]:active{opacity:.6} 与 .tapping{opacity:.55}， 整张缩略图被压淡＝白闪。禁掉这张图的按压 opacity，丝滑进大图查看器（同 v459 落地图、v455 套餐行手法）。 */ .dish-img:active, .dish-img.tapping { opacity: 1 !important; } .dish-info { flex: 1; min-width: 0; } .dish-name { font-size: 15px; font-weight: 600; margin-bottom: 3px; } .dish-desc { font-size: 12px; color: var(--text-sub); margin-bottom: 6px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dish-desc.truncated { cursor: pointer; text-decoration: underline dotted; text-decoration-color: var(--border); text-underline-offset: 2px; } .dish-desc.truncated:active { opacity: .55; } .dish-bottom { display: flex; align-items: center; justify-content: space-between; } .dish-price { font-size: 15px; font-weight: 700; color: var(--accent); } .dish-num-tag { font-size: 11px; color: var(--text-sub); background: #F0EFEC; padding: 2px 6px; border-radius: 4px; margin-left: 6px; } .dishimg-emoji { font-size: 120px; line-height: 1; } /* v607：原由 .tw-emoji img 宽高 120px 控制 */ /* 🚨 v524（Jay 报：点单端看大图，按左右箭头时按钮往下掉一个身位再弹回）。 真因：本按钮原用 top:50% + transform:translateY(-50%) 做垂直居中，而 #dishImgMask 属于 .attr-mask， 全局有 `.attr-mask *:active:not(.jelly-play){transform:none!important}`（防按压时缩放残留）—— 一按下去居中用的 translateY(-50%) 就被清空 → 按钮下坠半个身高(17px)；松手 transform 回来 → 弹回。 修法不是加豁免（同等特异性还要跟源码顺序较劲），而是【让它根本不依赖 transform 居中】： 按钮高度固定 34px，改用 margin-top:-17px，那条全局规则就再也伤不到它。 果冻的 scale 动画不受影响（它走 animation，且 :not(.jelly-play) 本就排除）。 */ .dishimg-nav { position: absolute; top: 50%; margin-top: -17px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.82); color: var(--text); font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2; box-shadow: 0 2px 8px rgba(0,0,0,.18); -webkit-tap-highlight-color: transparent; padding: 0; } .di-panel { flex: 0 0 100%; height: 100%; } .dish-nomenu-tag { font-size: 10px; font-weight: 700; color: #1F2937; background: #FBBF24; border: 1px solid #D97706; padding: 1px 7px; border-radius: 7px; white-space: nowrap; } /* 加减控件 */ .qty-ctrl { display: flex; align-items: center; gap: 0; } .qty-btn { width: 30px; height: 30px; border-radius: 50%; border: none; font-size: 18px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; touch-action: manipulation; transition: all .12s; } .qty-minus { background: #EEECEA; color: var(--text-sub); } .qty-plus { background: var(--accent); color: #fff; } .qty-num { width: 32px; text-align: center; font-size: 16px; font-weight: 700; } .qty-ctrl.zero .qty-minus, .qty-ctrl.zero .qty-num { display: none; } .qty-ctrl.zero .qty-plus { width: 30px; height: 30px; } .success-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(0,0,0,0.4); align-items: center; justify-content: center; pointer-events: none; /* 🩹 v427：隐藏态改 display:none —— 元素及子树【完全退出渲染/合成树】，根治 v381/v382 遗留的幽灵闪现： 原 visibility:hidden 挡得住绘制，却挡不住 .success-box 的 transform 常驻一个 GPU 合成层， 快速切底部导航、合成器抽风重排的瞬间被误画成「下单成功！」一闪。display:none 让那个层根本不存在。 显示动画改 keyframe（display:none→flex 时 transition 不触发、animation 会），弹入/淡入效果照旧保留。 */ display: none; } .success-overlay.show { display: flex; pointer-events: auto; backdrop-filter: blur(4px); animation: successFade .22s ease; } .success-box { background: var(--card); border-radius: 20px; padding: 40px; text-align: center; box-shadow: var(--shadow-lg); max-width: 300px; width: 90%; } .success-overlay.show .success-box { animation: successPop .32s cubic-bezier(.22,.61,.36,1); } @keyframes successFade { from { opacity: 0; } to { opacity: 1; } } @keyframes successPop { from { transform: scale(.9); opacity: .5; } to { transform: scale(1); opacity: 1; } } .success-box .check { font-size: 56px; margin-bottom: 12px; } .success-box h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; } .success-box p { font-size: 14px; color: var(--text-sub); } /* ===== 厨房页 — 双栏布局 ===== */ /* 🧭 v517：工作端（厨房/出菜/寿司/柜台共用此页）与餐桌页同病——原本是文档流滚动， iOS 文档级橡皮筋会把 position:fixed 的 nav 一起拖走。沿用 v97/v118、v516 同一套方案： body 不滚 → 定高内层滚动区 + overscroll-behavior:contain。 · 保留 flex 纵向布局不变（.kitchen-header 固定高、.kitchen-body flex:1 min-height:0 照旧）。 · min-height 归 0：.page 的 min-height:100dvh 会把已由 top/bottom 定高的容器撑破出视口。 · padding-top 收为 16px（位置已由 top 决定）；padding-bottom 沿用 .page 的 140px。 · 订单内容超出时，溢出仍计入本容器 scrollHeight，照常可滚到底，不会被裁。 */ #pageKitchen.active { display: flex; flex-direction: column; position: fixed; top: var(--nav-h); left: 0; right: 0; bottom: 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-top: 16px; } /* 全屏模式 */ :fullscreen nav, :-webkit-full-screen nav { display: none !important; } :fullscreen .page, :-webkit-full-screen .page { padding-top: 8px !important; } :fullscreen .orders-main, :-webkit-full-screen .orders-main { max-height: calc(100dvh - 80px) !important; } :fullscreen .stats-panel, :-webkit-full-screen .stats-panel { max-height: calc(100dvh - 80px) !important; } .kitchen-header { margin: 0 16px 12px; padding: 14px 16px; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; flex-shrink: 0; } .kitchen-header h2 { font-size: 18px; font-weight: 700; margin-right: auto; } .kitchen-header .order-count { padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 600; background: var(--accent-light); color: var(--accent); } .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); display: inline-block; animation: pulse 2s infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } } .kitchen-btn { padding: 8px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); font-size: 13px; color: var(--text-sub); cursor: pointer; touch-action: manipulation; } .kitchen-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* v475 药丸切换按钮（外形：胶囊 + 标签）。v514 起内部标记改为免密同款滑块开关，见下方注释。 */ .pill-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 7px 15px; min-height: 36px; box-sizing: border-box; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-sub); font-size: 13px; font-weight: 600; font-family: inherit; line-height: 1; cursor: pointer; touch-action: manipulation; white-space: nowrap; transition: background .16s ease, color .16s ease, border-color .16s ease; } /* v514（Jay）：通知 / 只看未完成 改用与「餐桌·免密」【完全同一套】滑块开关—— 直接复用 .ttbl-tgl + .ttbl-tgl-knob，不另造一套，两处控件语言从此一致 （左灰=关、右绿=开，店员有现成肌肉记忆，不必读字判断状态）。 .on 的表现同样对齐免密：边框与文字转绿、底色不变；原来「整颗药丸填实 accent」 与绿色滑块会打架，故一并改掉。原 .pt-dot 圆点标记随之作废，已删。 按压：本控件有选中态（.on）→ 按 Jay 两类规则属第①类，按压【零视觉变化】， 不再 brightness——滑块自身的滑动已是足够反馈，再压暗反而多一层图层。 */ .pill-toggle.on { border-color: #34C759; color: #15803D; } .pill-toggle.on .ttbl-tgl { background: #34C759; } .pill-toggle.on .ttbl-tgl-knob { left: 17px; } .pill-toggle:active, .pill-toggle.tapping { opacity: 1 !important; } /* ===== 餐桌卡片（精简版）===== */ .ttbl-card { background: var(--card); border-radius: 12px; box-shadow: var(--shadow); padding: 9px 11px 10px; display: flex; flex-direction: column; } .ttbl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; } .ttbl-numwrap { min-width: 0; } .ttbl-num { font-size: 17px; font-weight: 800; line-height: 1.1; } .ttbl-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 6px; margin-top: 5px; white-space: nowrap; } .ttbl-badge.open { background: var(--green-light); color: var(--green); } .ttbl-badge.locked { background: #FEF9C3; color: #CA8A04; } .ttbl-badge.idle { background: #F0F0EC; color: var(--text-sub); } .ttbl-dots { display: inline-flex; align-items: center; gap: 4px; padding: 0 12px; height: 30px; border: none; background: none; font-size: 14px; font-weight: 600; line-height: 1; color: var(--text-sub); cursor: pointer; border-radius: 8px; touch-action: manipulation; flex-shrink: 0; white-space: nowrap; } .ttbl-dots:active { background: var(--bg); } .ttbl-pw { text-align: center; font-size: 24px; font-weight: 800; letter-spacing: 4px; color: var(--accent); margin: 5px 0 8px; } /* v615 桌卡 GPS 标记：沿用 v355 呼叫按钮的定案 —— 文字包一层 position:relative 的 inline-block， 图标 position:absolute 挂在文字块【左外侧】。绝对定位不参与布局 → 「GPS」三个字在整条 .ttbl-pw 宽度内真正居中，图标只是贴着它浮动。原写法 '📍 GPS' 整串一起居中，emoji 把真正的文字顶偏了。 图标自身 letter-spacing 归零：父级的 4px 字距是给密码数字的，套在 emoji 上只会再推开一点。 */ .ttbl-gps { position: relative; display: inline-block; } .ttbl-gps-ico { position: absolute; right: 100%; margin-right: 6px; font-style: normal; letter-spacing: 0; } .ttbl-empty { text-align: center; font-size: 13px; color: var(--text-sub); padding: 12px 0 14px; } .ttbl-action { width: 100%; padding: 9px; border-radius: 10px; border: none; font-size: 14px; font-weight: 700; color: #fff; cursor: pointer; margin-top: auto; touch-action: manipulation; } .ttbl-row2 { display: flex; gap: 6px; margin-bottom: 6px; } .ttbl-nopin { flex: 1; min-width: 0; padding: 6px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; border: 1px solid var(--border); background: var(--card); color: var(--text-sub); } .ttbl-close { flex: 1; min-width: 0; padding: 6px; border-radius: 8px; font-size: 12px; font-weight: 700; line-height: 1.25; text-align: center; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; border: 1px solid var(--border); background: var(--card); color: var(--text-sub); } /* v337：免密改「药丸开关」（toggle）。手机用户对药丸有现成肌肉记忆——左灰=关、右绿=开， 不用读字就知道状态；而按钮式必须靠文案告诉你"现在是什么"，多一层脑内翻译。 规格沿用菜品上下架的 .me-tgl（38×21 轨道 + 17px 圆钮 + .2s 滑动，开=#34C759）， 与后台既有开关视觉统一，店员认知可迁移。独立 class 避免与 .me-tgl 互相干扰。 */ .ttbl-nopin { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 4px; border-radius: 8px; font-size: 11px; font-weight: 700; line-height: 1.2; cursor: pointer; touch-action: manipulation; -webkit-appearance: none; -webkit-tap-highlight-color: transparent; border: 1px solid var(--border); background: var(--card); color: var(--text-sub); } .ttbl-nopin.on { border-color: #34C759; color: #15803D; } /* 开：边框/文字转绿，与药丸呼应 */ .ttbl-tgl { width: 34px; height: 19px; border-radius: 10px; background: #c8c8c8; position: relative; transition: background .2s; flex-shrink: 0; } .ttbl-nopin.on .ttbl-tgl { background: #34C759; } .ttbl-tgl-knob { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.35); transition: left .2s; } .ttbl-nopin.on .ttbl-tgl-knob { left: 17px; } .ttbl-action.flip { background: #6366f1; } .ttbl-action.open { background: var(--accent); } /* ===== 桌位「更多功能」弹层 ===== */ .tmenu-sheet { position: relative; background: var(--card); border-radius: 18px; width: 100%; max-width: 360px; max-height: 85vh; overflow-y: auto; overscroll-behavior: none; padding: 8px 0 14px; box-shadow: var(--shadow-lg); border: 2px solid #1a1a1a; animation: tmenuFade .15s ease; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } @keyframes tmenuFade { from { opacity: 0; } to { opacity: 1; } } .tmenu-title { text-align: center; font-size: 15px; font-weight: 700; padding: 12px 40px; } .tmenu-close { position: absolute; top: 8px; right: 8px; width: 32px; height: 32px; border: none; background: none; font-size: 17px; color: var(--text-sub); cursor: pointer; border-radius: 8px; line-height: 1; touch-action: manipulation; z-index: 2; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; transition: background .1s; } .tmenu-close:active { background: var(--accent-light); } .tmenu-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 15px 24px; background: none; border: none; border-top: 1px solid var(--border); font-size: 15px; color: var(--text); cursor: pointer; text-align: left; touch-action: manipulation; font-family: inherit; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; transition: background .1s; } .tmenu-row:active { background: var(--accent-light); } .tmenu-ico { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; } .tmenu-label { flex: 1; min-width: 0; } .tmenu-row.danger .tmenu-label, .tmenu-row.danger .tmenu-ico { color: #e53e3e; } .tmenu-seats { display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .tmenu-seat-btn { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border); background: var(--card); font-size: 17px; font-weight: 700; color: var(--text); cursor: pointer; touch-action: manipulation; line-height: 1; -webkit-tap-highlight-color: transparent; -webkit-appearance: none; appearance: none; transition: background .1s, border-color .1s; } .tmenu-seat-btn:active { background: var(--accent-light); border-color: var(--accent); } .tmenu-seats .tmenu-seatval { min-width: 20px; text-align: center; font-weight: 700; } .kitchen-body { display: flex; gap: 12px; padding: 0 16px; flex: 1; min-height: 0; } /* 左侧统计栏 */ .stats-panel { width: 220px; flex-shrink: 0; background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; overflow-y: auto; max-height: calc(100dvh - var(--nav-h) - 90px); } .stats-panel h3 { font-size: 14px; font-weight: 700; margin-bottom: 10px; color: var(--text-sub); } .stats-list-wrap { position: relative; } .stats-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; grid-auto-rows: 46px; align-content: start; height: 514px; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: none; scrollbar-width: thin; scrollbar-color: var(--accent) #EFEEE9; } .stats-list::-webkit-scrollbar { width: 6px; -webkit-appearance: none; } .stats-list::-webkit-scrollbar-track { background: #EFEEE9; border-radius: 3px; } .stats-list::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 3px; } .stat-pill { display: flex; align-items: flex-start; padding: 6px 10px; border-radius: 8px; background: var(--accent-light); font-size: 12px; transition: opacity .15s; height: 46px; overflow: hidden; } .stat-pill.done { opacity: .35; background: var(--green-light); text-decoration: line-through; } .stat-pill .s-num { font-weight: 700; color: var(--accent); } .stat-pill.done .s-num { color: var(--green); } .stat-pill .s-qty { font-weight: 600; color: var(--text); } /* 右侧订单列表 */ /* 🚨 v630 修「超过 6 桌桌卡相互重叠」（Jay 报 + 控制台实测定位）。 病理三条缺一不可：① 本元素是 .kitchen-body 的 flex 子项，高度被**定死**（实测 494px）； ② 行轨道是隐式 auto，装不下时 grid 会把轨道按剩余空间【等分压缩】——实测 (494−3×12)/4 = 114.5px， 与控制台 `grid-template-rows: 114.5px ×4` 完全一致； ③ 轨道本不该压到内容以下，但 `.order-card{overflow:hidden}` 使其自动最小尺寸变成 0 → 可无限压。 叠加 align-items:start（卡片保持 164px 自然高，不随轨道缩）→ 卡片高出轨道 49.5px，直接压到下一张头上。 阈值也对得上：4 桌=2 行 340px 尚可容下；6 桌=3 行 516px 起超出 → 开始重叠，桌越多压得越狠 （正是 Jay 感知到的「间距渐变缩减」）。 修法：把行轨道钉死为内容高度，超出改由本元素既有的 overflow-y:auto 滚动承担 —— 间距从此恒为 gap 的 12px，与桌数无关。绝不能改成给 .order-card 写死 min-height：那是把 一个会随卡片结构漂移的魔数埋进 CSS。 */ .orders-main { flex: 1; overflow-y: auto; max-height: calc(100dvh - var(--nav-h) - 90px); display: grid; grid-template-columns: 1fr 1fr; gap: 12px; grid-auto-rows: max-content; align-content: start; align-items: start; } .order-card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border-left: 4px solid var(--accent); } .order-card.all-done { border-left-color: var(--green); opacity: .5; } .order-card.all-done.bill-called, .order-card.all-done.svc-called { opacity: 1; } /* v428 bug1：呼叫中的桌即使菜已全完成也不淡化——置顶且激活可见 */ .order-card.bill-called { border: 2.5px solid #22C55E; box-shadow: 0 0 0 3px rgba(34,197,94,0.24), var(--shadow); animation: billPulse 1.1s ease-in-out infinite; } .order-card.bill-called .order-table-tag { background: #22C55E; } @keyframes billPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(34,197,94,0.24), var(--shadow); } 50% { box-shadow: 0 0 0 7px rgba(34,197,94,0.48), var(--shadow); } } .bill-badge { font-size: 12px; font-weight: 800; color: #fff; background: #22C55E; padding: 3px 9px; border-radius: 6px; white-space: nowrap; } /* 🛎️ v351 呼叫服务：黄色外框 + 脉冲（与买单的绿色区分开）。徽章可点击消除。 */ .order-card.svc-called { border: 2.5px solid #EAB308; box-shadow: 0 0 0 3px rgba(234,179,8,0.24), var(--shadow); animation: svcPulse 1.1s ease-in-out infinite; } .order-card.svc-called .order-table-tag { background: #EAB308; } @keyframes svcPulse { 0%, 100% { box-shadow: 0 0 0 3px rgba(234,179,8,0.24), var(--shadow); } 50% { box-shadow: 0 0 0 7px rgba(234,179,8,0.48), var(--shadow); } } .svc-badge { font-size: 12px; font-weight: 800; color: #fff; background: #EAB308; padding: 3px 9px; border-radius: 6px; white-space: nowrap; cursor: pointer; } .svc-badge:active, .bill-badge:active { opacity: 0.7; } .bill-badge { cursor: pointer; } /* 同时呼叫买单+服务时：买单（绿）优先显示外框，服务徽章仍在 —— 避免两套脉冲打架 */ .order-card.bill-called.svc-called { border-color: #22C55E; animation: billPulse 1.1s ease-in-out infinite; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .order-head { padding: 8px 12px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--border); } .order-table-tag { padding: 4px 10px; border-radius: 6px; font-size: 15px; font-weight: 700; background: var(--accent); color: #fff; min-width: 48px; text-align: center; } .order-card.all-done .order-table-tag { background: var(--green); } .order-time { font-size: 12px; color: var(--text-sub); } .order-first-time { font-size: 12px; color: var(--text-sub); font-weight: 600; white-space: nowrap; } .order-head-right { margin-left: auto; display: flex; align-items: center; gap: 8px; } .order-body { padding: 12px 16px; } .order-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } /* 可点击的菜品 chip */ .item-chip { position: relative; min-width: 0; min-height: 46px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; text-align: center; padding: 4px 6px; border-radius: 6px; background: #F5F5F2; font-weight: 500; cursor: pointer; transition: background .15s, border-color .15s, opacity .15s; border: 2px solid transparent; user-select: none; touch-action: manipulation; } .item-chip:active { opacity: .75; } .item-chip .chip-num { font-weight: 700; color: var(--accent); font-size: var(--chip-font, 12px); line-height: 1.12; max-height: 2.4em; overflow: hidden; word-break: break-word; } .item-chip .chip-code { position: absolute; top: 2px; left: 3px; font-weight: 800; color: #fff; background: var(--text); font-size: 9px; padding: 0 4px; border-radius: 4px; line-height: 1.5; } .item-chip.done .chip-code { background: var(--text-sub); } .item-chip .chip-qty { position: absolute; top: 2px; right: 4px; color: var(--text-sub); font-size: 10px; font-weight: 600; } /* done state */ .item-chip.done { background: #EEECEA; opacity: .45; text-decoration: line-through; text-decoration-color: var(--text-sub); } .item-chip.done .chip-num { color: var(--text-sub); } /* 套餐项标识：青色 Menu 徽章 + 青边底，员工一眼区分 */ .item-chip .chip-menu { position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; display: grid; place-items: center; font-weight: 900; color: #fff; background: #0E9F8E; font-size: 11px; border-radius: 4px; line-height: 1; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .item-chip.combo { border-color: #0E9F8E; background: rgba(14,159,142,.10); } .item-chip.combo.done { border-color: rgba(14,159,142,.4); } .item-chip.done .chip-menu { background: var(--text-sub); } /* 顾客端·套餐选择卡片 */ .cat-btn-combo { color: #0E9F8E; font-weight: 700; } .combo-sect { padding-top: 12px; } .ccombo-card { border: 1.5px solid #0E9F8E; border-radius: 14px; padding: 14px; background: var(--card); box-shadow: var(--shadow); } .ccombo-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; } .ccombo-title { font-size: 17px; font-weight: 800; color: var(--text); } .ccombo-price { font-size: 18px; font-weight: 800; color: #0E9F8E; white-space: nowrap; } .ccombo-add { margin-top: 14px; width: 100%; padding: 11px; border: none; border-radius: 10px; background: #0E9F8E; color: #fff; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; touch-action: manipulation; } /* 套餐编辑器（档位式） */ .sm-card { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; margin:0 0 14px; box-shadow:var(--shadow); } .sm-head { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-bottom:12px; } .sm-name { flex:1; min-width:160px; padding:8px 10px; border:1.5px solid var(--border); border-radius:7px; font-size:15px; font-weight:700; font-family:inherit; } .sm-slots { display:flex; flex-direction:column; gap:10px; } .sm-slot { border:1px solid var(--border); border-radius:9px; padding:10px; background:var(--surface); } .sm-slot-head { display:flex; gap:8px; align-items:center; margin-bottom:6px; } .sm-slot-label { flex:1; min-width:120px; padding:6px 9px; border:1.5px solid var(--border); border-radius:6px; font-size:14px; font-weight:700; font-family:inherit; } .sm-chip-hint { font-size:11px; color:var(--text-sub); margin-bottom:7px; } .sm-chips { display:flex; flex-wrap:wrap; gap:6px; } .sm-chip { display:inline-flex; align-items:center; gap:5px; padding:6px 9px; border:1.5px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); font-size:12px; font-family:inherit; cursor:pointer; } .sm-chip .n { font-size:10px; font-weight:800; color:var(--text-sub); } .sm-chip.on { border-color:#0E9F8E; background:rgba(14,159,142,.12); color:#0B7E70; font-weight:700; } .sm-chip.on .n { color:#0E9F8E; } .sm-addslot { margin-top:10px; width:100%; padding:9px; border:1.5px dashed var(--border); border-radius:8px; background:transparent; color:var(--text-sub); font-size:13px; font-family:inherit; cursor:pointer; } /* 顾客套餐卡片·档位小结 */ .sm-mini { margin-top:8px; } .sm-mini-row { font-size:12px; color:var(--text-sub); padding:3px 0; border-top:1px dashed var(--border); } /* 套餐配色序号 + 供应/暂停态 */ .sm-badge { flex:0 0 auto; display:inline-flex; align-items:center; color:#fff; font-size:11px; font-weight:800; padding:3px 9px; border-radius:7px; white-space:nowrap; } .sm-card.off { opacity:.72; } .sm-card.off .sm-name { color:var(--text-sub); } .sm-toggle.on { border-color:#0E9F8E; color:#0B7E70; background:rgba(14,159,142,.10); } .sm-toggle.off { border-color:#CA8A04; color:#92660A; background:rgba(202,138,4,.12); } .cat-btn-combo.off { opacity:.5; } .ccombo-card.off { opacity:.62; border-color:var(--border); } .ccombo-paused { font-size:11px; font-weight:700; color:var(--text-sub); background:var(--surface); border:1px solid var(--border); border-radius:6px; padding:1px 7px; margin-left:6px; vertical-align:2px; white-space:nowrap; } .ccombo-add:disabled { background:var(--surface); color:var(--text-sub); border:1px solid var(--border); cursor:not-allowed; } /* 🕒 v480 定时供应：顾客端提示 + 灰态标签变体 */ .ccombo-paused.sched { color:var(--amber); border-color:var(--amber); background:var(--amber-light); } .ccombo-sched { margin-top:10px; font-size:12.5px; font-weight:650; color:var(--amber); background:var(--amber-light); border:1px solid var(--amber); border-radius:8px; padding:7px 10px; line-height:1.4; } /* 🕒 v480 定时供应：后台编辑器 */ .sm-sched { margin-top:12px; padding:11px 12px; border-radius:10px; background:var(--amber-light); border:1px solid var(--amber); } .sm-sched-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; } .sm-sched-lab { font-size:12.5px; font-weight:700; color:var(--amber); white-space:nowrap; } .sm-wd-group { display:inline-flex; gap:4px; } .sm-wd { width:30px; height:30px; border-radius:7px; border:1.5px solid var(--border); background:var(--card); color:var(--text-sub); font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; padding:0; line-height:1; touch-action:manipulation; } .sm-wd.on { border-color:var(--amber); color:#fff; background:var(--amber); } .sm-sched-t { height:32px; border:1.5px solid var(--border); border-radius:7px; background:var(--input); color:var(--text); font-size:13px; font-family:inherit; padding:0 6px; } .sm-sched-dash { color:var(--amber); font-weight:700; } .sm-sched-note { margin-top:8px; font-size:11.5px; color:var(--text-sub); line-height:1.5; } /* 🍱 v484 套餐编辑器折叠改版 */ .sm-caret { flex:0 0 auto; width:26px; height:26px; border:0; background:transparent; color:var(--text-sub); font-size:13px; cursor:pointer; padding:0; line-height:1; border-radius:6px; } .sm-caret:hover { background:var(--surface); color:var(--accent); } .sm-card-collapsed { cursor:pointer; } .sm-card-collapsed:hover { border-color:var(--accent); } .sm-head-sum { display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin:0; } .sm-sum-name { font-size:14.5px; font-weight:750; color:var(--text); } .sm-sum-price { font-size:14px; font-weight:800; color:#0E9F8E; } .sm-sum-sched { font-size:11.5px; font-weight:650; color:var(--amber); background:var(--amber-light); border:1px solid var(--amber); border-radius:7px; padding:2px 7px; white-space:nowrap; } .sm-sum-meta { font-size:11.5px; color:var(--text-sub); } .sm-sum-state { margin-left:auto; font-size:11px; font-weight:700; white-space:nowrap; } .sm-sum-state.on { color:var(--green,#2D9F6F); } .sm-sum-state.off { color:var(--text-sub); } .sm-slot-actions { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:8px 0 6px; } .sm-pickbtn { font:inherit; font-size:12.5px; font-weight:650; border:1.5px dashed var(--accent); background:var(--accent-light); color:var(--accent); border-radius:8px; padding:7px 13px; cursor:pointer; white-space:nowrap; } .sm-pickbtn:hover { background:var(--accent); color:#fff; } .sm-chips-empty { font-size:12px; color:var(--text-sub); } /* 选菜弹窗（复用 .sh-head/.sh-body/.sh-foot 视觉） */ .sm-pick-mask { position:fixed; inset:0; background:rgba(0,0,0,.45); display:none; align-items:flex-end; justify-content:center; z-index:9500; } .sm-pick-mask.show { display:flex; } .sm-pick-sheet { width:100%; max-width:560px; max-height:88dvh; background:var(--bg); border-radius:18px 18px 0 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); } .sm-pick-sheet .sh-head { position:relative; padding:16px 52px 12px 18px; border-bottom:1px solid var(--border); } .sm-pick-sheet .sh-head h3 { margin:0; font-size:16px; } .sm-pick-sheet .sh-head .x { position:absolute; top:14px; right:14px; width:30px; height:30px; border:0; background:var(--surface); border-radius:50%; font-size:17px; color:var(--text-sub); cursor:pointer; } .sm-pick-sheet .sh-body { overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:none; padding:14px 18px; flex:1; min-height:0; } .sm-pick-sheet .sh-foot { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 18px; border-top:1px solid var(--border); background:var(--card); } .sm-pick-cat { margin-bottom:14px; } .sm-pick-cat-name { font-size:12.5px; font-weight:750; color:var(--text-sub); margin-bottom:7px; } /* 套餐选餐弹窗 */ #smPickerOverlay { display:none; position:fixed; inset:0; z-index:2100; background:rgba(0,0,0,0.5); backdrop-filter:blur(8px); align-items:flex-end; justify-content:center; } #smPickerOverlay.show { display:flex; } #smPickerBox { width:100%; max-width:560px; max-height:88vh; overflow-y:auto; background:var(--card); border-radius:18px 18px 0 0; padding:18px; -webkit-overflow-scrolling:touch; } @media(min-width:600px){ #smPickerOverlay{ align-items:center; } #smPickerBox{ border-radius:18px; } } .sm-pick-head { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; margin-bottom:12px; } .sm-pick-title { font-size:18px; font-weight:800; color:var(--text); } .sm-pick-x { width:32px; height:32px; border:none; background:var(--surface); border-radius:50%; font-size:20px; color:var(--text-sub); cursor:pointer; flex:0 0 auto; } .sm-pick-slot { margin-bottom:14px; } /* v476：缺选档位定位闪烁——弹窗提示后滚到该档并脉冲高亮 */ @keyframes smFlash { 0% { box-shadow:0 0 0 0 rgba(14,159,142,0); } 22% { box-shadow:0 0 0 3px rgba(14,159,142,.55); } 100% { box-shadow:0 0 0 0 rgba(14,159,142,0); } } .sm-pick-slot.sm-flash { animation:smFlash 1.3s ease-out 1; border-radius:10px; } /* v507：自动滚动落位提示框（与上面缺选闪烁分家——那个保持 1.3s 快脉冲不动）。 Jay 定稿节奏：0.31s 升到最亮 → 整整维持 1.2s → 0.89s 淡出，总长 2.4s（12.9167%/62.9167% 由 0.31/2.4、1.51/2.4 精确换算）。 峰值颜色 = 选中菜品的边框色 #0E9F8E【全不透明】（.sm-pick-opt.on 的 border-color），与选中态视觉严格一致； 旧 smFlash 峰值只有 .55 透明度，故不复用。 */ @keyframes smFlashHold { 0% { box-shadow:0 0 0 0 rgba(14,159,142,0); animation-timing-function:ease-out; } 12.9167% { box-shadow:0 0 0 3px rgba(14,159,142,1); animation-timing-function:linear; } 62.9167% { box-shadow:0 0 0 3px rgba(14,159,142,1); animation-timing-function:ease-out; } 100% { box-shadow:0 0 0 0 rgba(14,159,142,0); } } .sm-pick-slot.sm-flash-hold { animation:smFlashHold 2.4s 1; border-radius:10px; } .sm-pick-lab { font-size:14px; font-weight:700; color:var(--text); margin-bottom:8px; } /* v471 套餐多份点餐 */ /* v508（Jay）：去掉包住「份数」标签+加减的灰底圆角框——同 v500 .cs-qty/.sm-qstep 的教训： 果冻 scale(1.08) 在贴身框里弹就发闷、显得按钮嵌在框中。标签与两个独立按钮直接落在 弹窗底色上（与 .sm-pick-lab 档位标题同一视觉层级，横向也对齐），形变有余地。 */ .sm-pick-qty { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 0; margin-bottom:12px; } .sm-pick-qty-lab { font-size:14px; font-weight:700; color:var(--text); } /* v500：同 .cs-qty —— 去掉共享外框与 overflow:hidden，拆成独立按钮，果冻才不被裁 */ .sm-qstep { display:flex; align-items:center; gap:6px; background:transparent; border:0; border-radius:0; overflow:visible; } .sm-qstep button { width:42px; height:36px; border:1px solid var(--border); border-radius:9px; background:var(--card); color:#0E9F8E; font-size:23px; font-weight:800; line-height:1; padding:0; cursor:pointer; touch-action:manipulation; } .sm-qstep button:disabled { color:var(--text-sub); opacity:.4; cursor:not-allowed; } .sm-qstep .n { min-width:36px; text-align:center; font-size:16px; font-weight:800; color:var(--text); } .sm-pick-tabs { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; } .sm-pick-tab { padding:7px 12px; border:1.5px solid var(--border); border-radius:9px; background:var(--card); color:var(--text-sub); font-size:12.5px; font-weight:700; font-family:inherit; cursor:pointer; touch-action:manipulation; } .sm-pick-tab.done { color:#0E9F8E; border-color:#0E9F8E; } .sm-pick-tab.cur { background:#0E9F8E; color:#fff; border-color:#0E9F8E; } .sm-pick-copyall { width:100%; margin-top:2px; padding:9px; border:1.5px dashed #0E9F8E; border-radius:10px; background:transparent; color:#0E9F8E; font-size:13px; font-weight:700; font-family:inherit; cursor:pointer; touch-action:manipulation; transition:background .12s ease; } /* 🍱 v568 下一份键：实心主色主按钮（比复制键更主，是多份流程的主动作），压变暗、禁用置灰 */ .sm-pick-next { width:100%; margin-top:2px; margin-bottom:6px; padding:11px; border:none; border-radius:10px; background:#0E9F8E; color:#fff; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; touch-action:manipulation; transition:filter .12s ease; } .sm-pick-next:active, .sm-pick-next.tapping { opacity:1 !important; filter:brightness(.92); } .sm-pick-next:disabled { background:var(--surface); color:var(--text-sub); border:1px solid var(--border); opacity:.55; cursor:not-allowed; } .sm-pick-next:disabled:active, .sm-pick-next:disabled.tapping { opacity:.55 !important; filter:none; } .sm-pick-copyall:active, .sm-pick-copyall.tapping { opacity:1 !important; filter:brightness(.94); } /* v510：当前份没选东西 / 没有空份可复制 → 禁用。虚线框与文字转灰，并单独兜住按压态， 免得被上一行的 opacity:1 !important 顶掉而看起来仍可按（同 .cs-qty 禁用态写法）。 */ .sm-pick-copyall:disabled { border-color:var(--border); color:var(--text-sub); opacity:.45; cursor:not-allowed; } .sm-pick-copyall:disabled:active, .sm-pick-copyall:disabled.tapping { opacity:.45 !important; filter:none; } .sm-pick-req { font-size:11px; font-weight:500; color:#0E9F8E; margin-left:6px; } .sm-pick-opt { display:flex; align-items:center; gap:10px; width:100%; padding:9px 12px; margin-bottom:7px; border:1.5px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); font-size:14px; font-family:inherit; cursor:pointer; text-align:left; transition: background .16s ease, border-color .16s ease; } /* v455 修「套餐点选闪一下」：此行是