:root { --bg: #1a1410; --panel: #241c16; --panel2: #2e241b; --panel3: #3a2e22; --accent: #e0a458; --accent2: #c97b3c; --text: #f3e9dc; --muted: #b9a893; --ok: #6fcf97; --warn: #f2c94c; --danger: #eb5757; --line: #3a2e22; --shadow: 0 6px 20px rgba(0,0,0,.35); --topbar-bg: linear-gradient(180deg, #2a2018, #1f1812); --nav-bg: #15100c; } /* 浅色主题：在 上设置 data-theme="light" 生效 */ :root[data-theme="light"] { --bg: #faf6f0; --panel: #ffffff; --panel2: #f4ede2; --panel3: #e9dfd0; --accent: #b5651d; --accent2: #d08a3e; --text: #2b2118; --muted: #8a7a66; --ok: #2e9e5b; --warn: #c08a12; --danger: #d64545; --line: #e6dac8; --shadow: 0 6px 20px rgba(120,90,50,.16); --topbar-bg: linear-gradient(180deg, #ffffff, #f5eee3); --nav-bg: #ffffff; } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; } body { font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; background: var(--bg); color: var(--text); font-size: 16px; overflow: hidden; user-select: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: 16px; } #app { display: flex; flex-direction: column; height: 100vh; height: 100dvh; } /* 顶栏 */ #topbar { display: flex; align-items: center; gap: 16px; padding: 10px 18px; background: var(--topbar-bg); border-bottom: 1px solid var(--line); padding-top: calc(10px + env(safe-area-inset-top)); } .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 20px; } .brand .logo { font-size: 24px; } .today-stat { display: flex; gap: 22px; margin-left: 10px; } .ts-item { display: flex; flex-direction: column; line-height: 1.15; } .ts-label { font-size: 11px; color: var(--muted); } .ts-val { font-size: 18px; font-weight: 700; color: var(--accent); } .clock { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 15px; } /* 视图区 */ #view { flex: 1; overflow: hidden; padding: 14px; } /* 底部导航 */ #bottomnav { display: flex; background: var(--nav-bg); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .nav-btn { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 4px; color: var(--muted); font-size: 12px; } .nav-btn .nav-ico { font-size: 22px; } .nav-btn.active { color: var(--accent); background: rgba(224,164,88,.08); } /* 通用卡片/按钮 */ .card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; } .btn { background: var(--panel3); color: var(--text); border-radius: 10px; padding: 10px 14px; font-size: 15px; border: 1px solid var(--line); } .btn:active { transform: scale(.97); } .btn-accent { background: var(--accent); color: #2a1c0c; font-weight: 700; border: none; } .btn-ok { background: var(--ok); color: #11331f; font-weight: 700; border: none; } .btn-danger { background: var(--danger); color: #fff; border: none; } .btn-ghost { background: transparent; } .chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; background: var(--panel3); color: var(--muted); } .chip.on { background: var(--accent); color: #2a1c0c; font-weight: 700; } /* 点单视图布局 */ .order-layout { display: grid; grid-template-columns: 150px 1fr 300px; gap: 14px; height: 100%; } .tables { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start; overflow-y: auto; } .table-btn { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 6px; text-align: center; font-size: 16px; font-weight: 600; position: relative; } .table-btn .t-status { display: block; font-size: 11px; color: var(--muted); margin-top: 4px; font-weight: 400; } .table-btn.busy { border-color: var(--accent2); } .table-btn.busy .t-status { color: var(--accent); } .table-btn.active { background: var(--panel3); border-color: var(--accent); } .menu-area { display: flex; flex-direction: column; gap: 12px; overflow: hidden; } .cat-tabs { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; } .cat-tabs .chip { white-space: nowrap; } .items { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; overflow-y: auto; align-content: start; padding-right: 4px; } .item-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 6px; position: relative; } .item-card .i-name { font-size: 15px; font-weight: 600; } .item-card .i-meta { font-size: 12px; color: var(--muted); display: flex; justify-content: space-between; } .item-card .i-price { color: var(--accent); font-weight: 700; } .item-card .i-add { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: #2a1c0c; font-size: 20px; font-weight: 700; line-height: 1; } .item-card.out { opacity: .45; } .item-card.out .i-add { background: var(--panel3); color: var(--muted); } /* 购物车 */ .cart { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; } .cart-head { padding: 12px 14px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; } .cart-head .ch-title { font-weight: 700; } .cart-list { flex: 1; overflow-y: auto; padding: 6px 10px; } .cart-empty { color: var(--muted); text-align: center; padding: 40px 10px; font-size: 14px; } .cart-row { display: flex; align-items: center; gap: 8px; padding: 8px 4px; border-bottom: 1px dashed var(--line); } .cart-row .cr-name { flex: 1; font-size: 14px; } .cart-row .cr-name small { color: var(--muted); display: block; font-size: 11px; } .stepper { display: flex; align-items: center; gap: 6px; } .stepper button { width: 28px; height: 28px; border-radius: 8px; background: var(--panel3); font-size: 18px; font-weight: 700; } .stepper .qty { min-width: 22px; text-align: center; font-weight: 700; } .cr-price { width: 64px; text-align: right; font-weight: 600; } .cart-note { width: 100%; margin-top: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 8px; } .cart-foot { padding: 12px 14px; border-top: 1px solid var(--line); } .cart-total { display: flex; justify-content: space-between; font-size: 18px; font-weight: 700; margin-bottom: 10px; } .cart-total .amt { color: var(--accent); } .cart-actions { display: flex; gap: 8px; } .cart-actions .btn { flex: 1; } /* 列表类视图 */ .list-wrap { height: 100%; overflow-y: auto; } .toolbar { display: flex; gap: 10px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .toolbar .spacer { flex: 1; } .section-title { font-size: 15px; color: var(--muted); margin: 14px 0 8px; } /* 表格 */ .tbl { width: 100%; border-collapse: collapse; } .tbl th, .tbl td { padding: 11px 12px; text-align: left; border-bottom: 1px solid var(--line); font-size: 14px; } .tbl th { color: var(--muted); font-weight: 600; font-size: 12px; position: sticky; top: 0; background: var(--bg); } .tbl tr:active { background: var(--panel); } .tag { padding: 3px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; } .tag.cash { background: #2f4858; color: #cfe8ff; } .tag.wechat { background: #1aad19; color: #fff; } .tag.alipay { background: #1677ff; color: #fff; } .tag.card { background: #6b4e9e; color: #fff; } .tag.other { background: var(--panel3); color: var(--muted); } .tag.ok { background: rgba(111,207,151,.18); color: var(--ok); } .tag.warn { background: rgba(242,201,76,.18); color: var(--warn); } .tag.danger { background: rgba(235,87,87,.18); color: var(--danger); } /* 库存 */ .stock-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; } .stock-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px; } .stock-card .sc-top { display: flex; justify-content: space-between; align-items: baseline; } .stock-card .sc-name { font-weight: 600; } .stock-card .sc-cat { font-size: 11px; color: var(--muted); } .stock-card .sc-qty { font-size: 26px; font-weight: 800; margin: 8px 0 2px; } .stock-card .sc-unit { font-size: 13px; color: var(--muted); } .stock-card .sc-bar { height: 6px; border-radius: 4px; background: var(--panel3); margin: 8px 0; overflow: hidden; } .stock-card .sc-bar > i { display: block; height: 100%; background: var(--ok); } .stock-card.warn .sc-bar > i { background: var(--warn); } .stock-card.danger .sc-bar > i { background: var(--danger); } .stock-card .sc-ops { display: flex; gap: 6px; align-items: center; margin-top: 8px; } .stock-card .sc-ops .btn { padding: 6px 10px; font-size: 14px; } .stock-card .sc-ops input { width: 64px; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 6px 8px; text-align: center; } /* 统计 */ .stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); gap: 12px; margin-bottom: 14px; } .stat-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; } .stat-card .sc-label { font-size: 12px; color: var(--muted); } .stat-card .sc-value { font-size: 24px; font-weight: 800; color: var(--accent); margin-top: 4px; } .stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } @media (max-width: 780px){ .stat-grid { grid-template-columns: 1fr; } } .chart-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 14px; } .chart-card h3 { margin: 0 0 12px; font-size: 15px; } .bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 13px; } .bar-row .bl { width: 90px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .bar-row .bt { flex: 1; height: 18px; background: var(--panel3); border-radius: 6px; overflow: hidden; } .bar-row .bt > i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); } .bar-row .bv { width: 80px; text-align: right; font-variant-numeric: tabular-nums; } /* 设置 */ .set-section { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 16px; margin-bottom: 14px; } .set-section h3 { margin: 0 0 12px; font-size: 16px; } .field { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .field label { width: 96px; color: var(--muted); font-size: 14px; } .field input, .field select { flex: 1; background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 9px 10px; } .menu-edit-row { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr .8fr auto; gap: 6px; align-items: center; margin-bottom: 6px; } .menu-edit-head { display: grid; grid-template-columns: 1.4fr 1fr .8fr .8fr .8fr auto; gap: 6px; align-items: center; margin: 6px 0 2px; font-size: 12px; color: var(--muted); font-weight: 600; } .menu-edit-head span { padding: 0 8px; } .btn-warn { background: var(--warn); color: #1a1410; border-color: var(--warn); font-weight: 600; } .btn-warn:hover { filter: brightness(1.05); } .card-h { padding: 10px 14px; font-weight: 600; border-bottom: 1px solid var(--line); background: var(--panel2); } .menu-edit-row input { background: var(--panel2); border: 1px solid var(--line); border-radius: 8px; color: var(--text); padding: 7px 8px; min-width: 0; } .menu-edit-row .del { color: var(--danger); padding: 7px 10px; } /* 外观：主题切换 / 图标选择 */ .theme-row { display: flex; gap: 8px; flex-wrap: wrap; } .theme-row .chip { padding: 8px 18px; font-size: 14px; cursor: pointer; } .logo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; } .logo-opt { display: flex; align-items: center; justify-content: center; padding: 10px 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; cursor: pointer; } .logo-opt .lo { font-size: 28px; line-height: 1; } .logo-opt.on { border-color: var(--accent); background: rgba(224,164,88,.14); } /* 弹窗 */ #modal-root:empty { display: none; } .modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; } .modal { background: var(--panel); border: 1px solid var(--line); border-radius: 16px; width: 100%; max-width: 460px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow); } .modal.wide { max-width: 640px; } .modal-head { padding: 16px 18px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; font-weight: 700; font-size: 17px; } .modal-body { padding: 18px; } .modal-foot { padding: 14px 18px; border-top: 1px solid var(--line); display: flex; gap: 10px; } .modal-foot .btn { flex: 1; } .pay-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; } .pay-btn { background: var(--panel2); border: 1px solid var(--line); border-radius: 12px; padding: 16px; text-align: center; font-size: 16px; font-weight: 600; } .pay-btn.on { border-color: var(--accent); background: rgba(224,164,88,.12); color: var(--accent); } .detail-line { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14px; } .detail-line.total { font-weight: 800; font-size: 17px; border: none; } .detail-line.total .amt { color: var(--accent); } /* Toast */ .toast { position: fixed; left: 50%; bottom: 90px; transform: translateX(-50%) translateY(20px); background: #000; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 80; } .toast.show { opacity: .92; transform: translateX(-50%) translateY(0); } .empty-hint { color: var(--muted); text-align: center; padding: 50px 10px; font-size: 14px; } /* 滚动条 */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-thumb { background: var(--panel3); border-radius: 8px; } /* ===== 手机竖屏适配（≤760px）：三栏改上下堆叠，桌台横滑，购物车下方可滚动 ===== 仅改布局，不碰任何业务逻辑；iPad(≥768) 仍走上方三栏。 */ @media (max-width: 760px) { #topbar { gap: 8px; padding: 8px 12px; padding-top: calc(8px + env(safe-area-inset-top)); flex-wrap: wrap; } .today-stat { gap: 12px; margin-left: 0; } .brand { font-size: 17px; } .clock { font-size: 13px; } #view { padding: 8px; } .order-layout { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; gap: 10px; } .tables { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82px; overflow-x: auto; overflow-y: hidden; max-height: 76px; padding-bottom: 2px; } .table-btn { padding: 10px 4px; font-size: 14px; } .menu-area { overflow: hidden; } .items { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); } .cart { max-height: 44vh; } .cart-actions .btn { font-size: 14px; padding: 12px 10px; } .menu-edit-row, .menu-edit-head { grid-template-columns: 1.2fr 1fr .7fr .7fr .7fr auto; } .field label { width: 84px; font-size: 13px; } }